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

IT技术 javascript ios html ios7 safari
2021-03-15 16:35:37

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

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

到目前为止,我们发现的唯一解决方案是强制用户:

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

这些替代方案均不可接受。苹果似乎意识到了这个问题,但一直无视它。他们已将报告的错误作为错误 #14076889 的副本关闭。

我相信我们不是唯一遇到同样问题的团队。有谁知道解决方案?

6个回答

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 UI,用户必须主动点击此标题栏。

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

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

要更永久地解决此问题,Mobile Safari 将支持 HTML5 全屏 API(OS X 上的 Safari 支持该 API!)。唉,现在没有支持,而且从历史上看,iOS 点版本没有添加新的 Safari 功能,所以也许这适用于 iOS 8。

请注意,iOS 8 Beta4 已取消对minimal-ui, developer.apple.com/library/prerelease/ios/releasenotes/General/... 的支持将来可能无法控制 Mobile Safari 的默认行为。stackoverflow.com/questions/24889100/...
2021-05-07 16:35:37
对于 iOS9,您可以使用最小用户界面仿真。例如:stackoverflow.com/a/26884561/2764408
2021-05-10 16:35:37
正是我需要的信息。希望他们在弃用最小用户界面时支持全屏 API。
2021-05-11 16:35:37
当从服务器接收到这个字符串(“minimal-ui”)时,这个字符串(“minimal-ui”)是否需要成为 HTML 页面的一部分,或者是否可以动态修改视口并通过 JavaScript 添加/删除该字符串?
2021-05-13 16:35:37
iOS10呢?似乎无法找到任何可行的解决方案。
2021-05-20 16:35:37

更新:根据发行说明上的此论坛帖子目前在 iOS7.1 Beta 中有一个元属性可以修复此问题

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

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

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

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

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

@shanebo 那不是真的。<meta name="viewport" content="width=device-width, minimal-ui">在我测试的 iPhone 5 以及 iOS 模拟器上都可以正常工作。
2021-04-23 16:35:37
你想用 jQuery 删除整个视口还是只删除最小用户界面?
2021-04-24 16:35:37
设置后,如何使用 jQuery 删除它?
2021-05-06 16:35:37
您需要将其设置为 true:minimum-ui=1 所以改用它:<meta name="viewport" content="width=device-width, user-scalable=0, minimum-ui=1">
2021-05-11 16:35:37

更新: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

抱歉没有发布官方答案。Apple 的发行说明仍在保密协议中。但请记住,您需要运行正确版本的 iOS 才能进行更改。
2021-05-08 16:35:37

编辑2:

自 iOS 7.1 起不起作用

编辑:

一些游戏采用了覆盖提示玩家滚动条然后锁定滚动直到条再次弹出。在这种情况下position: fixed有很大帮助,因为它可以稳定运动(无法更好地解释,只能自己尝试)。这个游戏是这种方法的一个很好的例子:

www.paf.com/mobile/launch/flowers.html(抱歉,不能发布超过 2 个链接)

最近我还偶然发现了一个 hack,它停用了导航栏触发顶部区域。您所要做的就是使用以下样式向 DOM 添加一个随机元素:

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


在此处 阅读更多相关信息