无法在 iPhone/iPod touch 的 Safari iOS 7 中隐藏导航栏

Posted 2023-03-06

【中文标题】无法在 iPhone/iPod touch 的 Safari iOS 7 中隐藏导航栏

【英文标题】：Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch

【发布时间】：2013-09-18 12:57:55

【问题描述】：

我不相信有任何解决方案可以使用 javascript/css/html 以编程方式隐藏栏，但让我尝试描述一个问题。我们是手游开发者团队，我们开发一款游戏已经一年了。

在 ios 7 发布后，我们遇到了无法隐藏导航栏的问题。一旦用户点击 Safari 浏览器的上部或下部，导航栏就会再次出现并隐藏游戏的所有控件。

目前我们发现的唯一解决方案是强制用户：

旋转设备 滚动页面 将应用程序添加到主屏幕

这些替代方案都不可接受。看起来苹果已经意识到了这个问题，但一直忽略它。他们已将一个报告的错误作为错误 #14076889 的副本关闭。

我相信我们不是唯一遇到同样问题的团队。有谁知道解决办法吗？

【参考方案1】：

2014 年 9 月更新：iOS 8 已删除 minimal-ui 功能 除了依赖默认浏览器行为之外，没有其他方法可以删除/隐藏导航栏（滚动时会隐藏导航栏，但前提是滚动元素是页面的BODY）。唯一的“解决方法”是将应用程序保存到主屏幕并设置正确的元标记（见下文）。

2014 年 8 月更新：iOS 8（测试版）不再支持 minimal-ui。 没有解决方法。 （原因可能是网站滥用它来阻止人们离开，iOS 8 Safari 中可能有尚未公开的新功能取代minimal-ui。）

iOS 7.1 添加了一个新的 API 来解决这个问题：

<meta name="viewport" content="minimal-ui">

默认情况下，这个新的视口标志隐藏了 Safari UI（仅显示带有 URL 和 SSL 指示符的小标题栏）。要访问 Safari 用户界面，用户必须主动点击此标题栏。

请注意，在 iOS 7.0.x 上，没有 API 或已知的解决方法。在这些版本中，如果您想永久隐藏 Safari 的浏览器 chrome，您需要让用户将 Web 应用程序添加到主屏幕（使用适当的元标记设置 <meta name="apple-mobile-web-app-capable" content="yes">）或使用某种原生应用程序包装器，例如 Phonegap并通过 App Store 分发。

就个人而言，我希望他们没有删除他们在 iOS 6 Mobile Safari 上以横向模式引入的“全屏”按钮，这是一个让开发人员和用户满意的出色解决方案。

移动 Safari 支持 HTML5 全屏 API（OS X 上的 Safari 支持该 API！）是更永久解决此问题的理想选择。唉，现在没有支持，而且历史上 iOS 点版本没有添加新的 Safari 功能，所以也许这就是 iOS 8 的东西。

【讨论】：

这个字符串（“minimal-ui”）在从服务器接收时是否需要成为 HTML 页面的一部分，或者可以动态修改视口并通过 JavaScript 添加/删除该字符串？

请注意，iOS 8 Beta4 已移除对minimal-ui、developer.apple.com/library/prerelease/ios/releasenotes/General/… 的支持，未来可能无法控制Mobile Safari 默认行为。 ***.com/questions/24889100/…

正是我需要的信息。希望他们在弃用最小用户界面时支持全屏 API。

对于 iOS9，您可以使用最小 ui 仿真。例如：***.com/a/26884561/2764408

iOS10呢？似乎找不到任何可行的解决方案。

【参考方案2】：

更新：iOS7.1 现已发布，因此 NDA 已解除。

<meta name="viewport" content="minimal-ui">

确实是正确的标签，并且可以在实时版本中使用。请记住，如果您需要，“视口”可以支持逗号分隔的列表。

我将它与其他移动变量结合起来，使网站感觉像一个应用程序：

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

我们也一直在努力解决这个问题。我们的网站上有一个 TabBar，每次您尝试单击一个标签时，Safari 控件都会弹出。

今天的希望。如果您是苹果开发者计划的成员，我强烈建议您访问这个论坛：https://devforums.apple.com/message/927476

W

【讨论】：

很抱歉没有发布官方答案。 Apple 的发行说明仍处于 NDA 之下。但请记住，您需要运行正确版本的 iOS 才能进行更改。

【参考方案3】：

更新：根据发行说明中的​​this forum post，目前在 iOS7.1 Beta 中有一个用于修复此问题的元属性。

<meta name="viewport" content="minimal-ui">

我已经进行了测试，可以确认此功能目前处于 Beta 2 中。

【参考方案4】：

注意：新的 minimum-ui 选项是一个很好的解决方案，但它需要成为 HTML 响应的一部分。 我尝试在 iOS7.1 beta3 上使用 JS 附加视口元标记

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

浏览器会忽略值“minimal-ui”。

【讨论】：

您需要将其设置为 true：minimal-ui=1 所以改用这个：

@shanebo 这不是真的。 <meta name="viewport" content="width=device-width, minimal-ui"> 在我测试的 iPhone 5 以及 iOS 模拟器上运行良好。

一旦设置好了，如何使用 jQuery 删除它？

你想用 jQuery 删除整个视口还是只删除最小的 UI？

【参考方案5】：

编辑 2：

自 iOS 7.1 起无法使用

编辑：

一些游戏采用了hints the player to scroll away the bars 的覆盖，然后锁定滚动，直到栏再次弹出。在这种情况下，position: fixed 有很大帮助，因为它可以稳定运动（无法更好地解释，只能自己尝试）。这个游戏就是这种方法的一个很好的例子：www.paf.com/mobile/launch/flowers.html（抱歉，不能发布超过 2 个链接）最近我有还偶然发现了一种可以停用顶部区域的导航栏触发的黑客行为。您所要做的就是向您的 DOM 添加一个具有以下样式的随机元素：

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

阅读更多关于它的信息here。

【参考方案6】：

希望这对某人有所帮助，但我不想设置我的视口宽度=设备宽度......因为它在 iphone 4 上是 480 像素......我希望我的游戏在所有设备上都是 800 像素。

如果你不设置它，那么 minimum-ui 不会注册。

我的工作正在做：

<meta name="viewport" content="width=device-width, minimal-ui">

然后在页面加载后更改视口：

  $(window).load(function()
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  );

我很震惊它的工作原理。仅当用户单击屏幕的顶部/底部时，才会出现地址栏和下部 UI​​ 按钮。现在喜欢它。

【讨论】：

如果你只使用 它运行良好

【参考方案7】：

这个解决方案对我有用，但在我的情况下，webapp 适用于 一个私人公众，我可以控制将要使用的 Ipad。

我尝试使用所有可能的元标记和技巧，而且真的，之后 IOS8去掉了minimal-ui特性，几乎是不可能解决的。

跳出框框思考，我们的团队找到了一个不错的解决方案：

Mercury 浏览器以全屏方式打开，即使页面 正在收费，地址栏不出现。 它是右下角的一个小图标，仅 :) 它完美地解决了我们的问题！

但我再说一遍：如果您正在为一般公众开发 web 应用程序，请不要使用它。 用户体验强迫您的用户下载不同的浏览器是可怕的 访问应用程序。

更新

我的一位开发者朋友提出了这个解决方案：

使用来自 appcelerator 的 Titanium 内部的 webview。 它不会在 Apple Store 上得到批准，但对于私人活动来说，它会很好用！

【参考方案8】：

如果您正在创建网络应用程序，您可以从主屏幕创建指向 URL 的链接；并使用以下 HTML 元标记：

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

这会将指标叠加在您的标题/导航栏上。 （您在所有 iPad 屏幕上看到的指标。

有关详细信息，请参阅： https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html