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

Question 1

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

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

到目前为止，我们发现的唯一解决方案是强制用户执行以下操作：

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

这些替代方法都不可接受。看起来苹果公司已经意识到了这个问题，但是一直忽略它。他们已经关闭了一个已报告的错误，其与错误＃14076889重复。

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

Question 2

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的浏览器镶边，则需要让用户将Web应用添加到主屏幕（已设置了适当的meta标签<meta name="apple-mobile-web-app-capable" content="yes">），或者使用某种本地应用包装器（如Phonegap）并通过在App Store中。

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

要更永久地解决此问题的理想候选人是Mobile Safari支持HTML5全屏API（OS X上的Safari支持！）。las，目前尚无支持，并且历史上iOS发行点没有添加新的Safari功能，所以也许这适用于iOS 8。

Question 3

更新：根据发行说明上的此论坛帖子，iOS7.1 Beta中当前有一个用于修复此问题的meta属性。

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

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

Question 4

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

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

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

Question 5

更新：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控件都会弹出。

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

w ^

Question 6

编辑2：

自iOS 7.1起不起作用

编辑：

一些游戏采用了叠加层，提示玩家滚动条形，然后锁定滚动，直到条形再次弹出。在这种情况下position: fixed，它有助于稳定动作（无法更好地解释它，只能自己尝试一下）。该游戏就是这种方法的一个很好的例子：

www.paf.com/mobile/launch/flowers.html（对不起，不能发布两个以上的链接）

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

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

在此处了解更多信息。

Question 7

如果要创建Web应用程序，则可以从主屏幕创建指向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

Question 8

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

而且，如果您未设置它，那么minimal-ui不会注册。

我的工作正在做：

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

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

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

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

Question 9

该解决方案对我有用，但就我而言，该Webapp适用于私人公众，我可以控制要使用的Ipad。

我试图使用所有可能的元标记和黑客手段，实际上，在IOS8删除了最小用户界面功能之后，实际上是无法解决的。

跳出框框，我们的团队达成了一个不错的解决方案：

Mercury浏览器将以全屏模式打开，即使在为页面充电时，也不会出现地址栏。它是右下角的一个小图标，仅供:)完美解决了我们的问题！

但我重复一遍：如果您通常为公众开发Webapp，请不要使用它。UX迫使您的用户下载其他浏览器来访问该应用程序是很糟糕的。

更新

我的一个开发人员朋友提出了以下解决方案：

从appcelerator使用Titanium内部的Web视图。它不会在Apple Store上得到认可，但对于私人活动，它将很好用！