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

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

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

到目前为止，我们找到的唯一解决方案是强制用户：

旋转装置

滚动页面

将应用程序添加到主屏幕

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

---

我相信我们不是唯一一支遇到同样问题的球队。有人知道这个解决方案吗？

2014年9月更新：iOS 8删除了

最小用户界面

功能 除了依赖默认浏览器行为之外，再也无法删除/隐藏导航栏（滚动时，导航栏将被隐藏，但仅当滚动元素是页面的

主体时）。唯一的“解决办法”是将应用程序保存到主屏幕，并设置正确的元标记（见下文）

2014年8月更新：iOS 8（测试版）不再支持
最小ui。
没有解决办法。（原因很可能是网站滥用它，试图阻止人们离开，但iOS 8 Safari中可能有尚未公开的新功能取代了
最小用户界面
）

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

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



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

请注意，在iOS 7.0.x上，没有API或已知的解决方法。在这些版本中，如果您想永久隐藏Safari浏览器的chrome浏览器，您需要让用户将web应用添加到主屏幕（设置适当的元标记），或者使用某种本机应用包装，如Phonegap，并通过应用商店分发

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

要更持久地解决这一问题，一个完美的候选方案是让Mobile Safari支持HTML5全屏API（在OS X上的Safari上受支持！）。唉，现在还没有支持，从历史上看，iOS point版本没有添加新的Safari功能，所以这可能是iOS 8的特点。
更新：iOS 7.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">



-

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

今天是希望。如果您是apple开发者计划的成员，我强烈建议您访问此论坛：

W
更新：根据发行说明中的说明，iOS7.1测试版中有一个元属性用于修复此问题

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



我已经运行了一个测试，可以确认此功能目前处于Beta 2中。
注意：新的最小ui选项是一个很好的解决方案，但它需要成为HTML响应的一部分。
我在iOS7.1beta3上尝试用JS附加viewport元标记

$（'head'）。追加（''）

浏览器将忽略“最小ui”值
 编辑2:

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

自iOS 7.1以来无法工作

编辑：

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

一些游戏已经采用了覆盖，然后锁定滚动条，直到再次弹出。在这种情况下，
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;



阅读更多信息。
希望这对某人有所帮助，但我不想设置我的视口宽度=设备宽度。。因为它在iPhone4上是480px。。我希望我的游戏在所有设备上都能达到800像素

如果您没有设置它，那么minimal ui就不会注册

我的工作是：


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

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

我很震惊它能起作用。仅当用户单击屏幕的顶部/底部时，地址栏和下部UI按钮才会出现。现在就喜欢它。
这个解决方案对我来说很有效，但在我的情况下，webapp是针对我的
一个私人公共场所，我可以控制将要使用的Ipad

我尝试使用所有可能的元标签和黑客，真的，在
IOS8删除了最小的ui功能，这几乎是不可能解决的

跳出框框思考，我们的团队得出了一个很好的解决方案：

Mercury浏览器会全屏打开，甚至在翻页时也会打开
正在充电时，地址栏不会出现。
它是右下角的一个小图标，仅限：）
它对我们的问题非常有效

但是我重复一次：如果你正在为公众开发一个webapp，就不要使用它。
UX强迫用户下载不同的bro是很糟糕的