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

Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch

提问by Anton Sinelnyk

I don't believe there is any solution to hide bars programmatically using javascript/css/html, but let me try to describe a problem. We are the team of mobile game developers and we have been developing a game for one year.

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

After iOS 7 announcement we have faced the problem that it is IMPOSSIBLE to hide the navigation bars. Once user taps in the upper or lower part of the Safari browser, navigation bars are appearing again and hide all controls of the game.

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

The only solution we have found so far is forcing user to:

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

1. Rotate device
2. Scroll the page
3. Add application to Home-screen

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

None of these alternatives is acceptable. It looks like Apple is aware of this problem, but keeps ignoring it. They have closed a reported bug as a duplicate of the bug #14076889.

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

I believe that we are not the only team who experience the same problem. Does anyone know the solution?

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

回答by thomasfuchs

Update September 2014: iOS 8 has removed the minimal-uifeatureThere's again no way to remove/hide navigation bars other than to rely on the default browser behavior (bars will be hidden when scrolling, but only if the scrolling element is the BODYof the page). The only "workaround" is to save the app to the homescreen and have the proper meta tags set (see below).

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

Update August 2014: iOS 8 (beta) no longer supports minimal-ui. There's no workaround. (The reason for this is likely due to abuse by websites that used it to try to prevent people from navigating away, tho there may be new features in iOS 8 Safari that have not been made public yet that replace minimal-ui.)

2014 年 8 月更新：iOS 8（测试版）不再支持minimal-ui. 没有解决方法。（造成这种情况的原因可能是网站滥用它来试图阻止人们导航，尽管 iOS 8 Safari 中可能有尚未公开的新功能取代了minimal-ui。）

iOS 7.1 added a new API to solve this problem:

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

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

This new viewport flag hides the Safari UI by default (only a small title bar with URL and SSL indicator are shown). To access the Safari UI, users must actively tap this title bar.

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

Note that on iOS 7.0.x, there's no API or known workaroundfor this. In those versions, if you want to hide Safari's browser chrome permanently you need to either get the user to add the web app to the home screen (with the appropriate meta tags set <meta name="apple-mobile-web-app-capable" content="yes">) or use some sort of native app wrapper like Phonegap and distribute via the App Store.

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

Personally, I wish they hadn't removed the "full screen" button they introduced in landscape mode on iOS 6 Mobile Safari, which was a great solution that made developers and users happy.

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

A perfect candidate for this to be solved more permanently would be for Mobile Safari to support the HTML5 full screen API (which is supported on Safari on OS X!). Alas, there's no support right now and historically iOS point releases didn't add new Safari features, so maybe that's something for iOS 8.

Mobile Safari 支持 HTML5 全屏 API（OS X 上的 Safari 支持该 API）是要更永久地解决此问题的完美候选者！唉，现在没有支持，而且从历史上看，iOS 点版本没有添加新的 Safari 功能，所以也许这适用于 iOS 8。

回答by Mark

UPDATE: There is a meta property for fixing this currently in iOS7.1 Beta according to this forum poston the release notes.

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

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

I have run a test and can confirm this feature is currently in Beta 2.

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

回答by mex23

NOTE: The new minimal-ui option is a great solution but it needs to be part of the HTML response. I tried on iOS7.1 beta3 to append the viewport meta tag with JS

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

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

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

the value "minimal-ui" is ignored by the browser.

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

回答by William George

Update: iOS7.1 has now been released so the NDA has lifted.

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

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

Is indeed the correct tag and works in the live release. Remember that "viewport" can support a comma separated list if you require.

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

I combine it with other mobile variables to make the website feel like an app:

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

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

-

——

We have been struggling with this one too. We have a TabBar on our site and every time you attempt to click a tab safari controls pop up.

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

Today hope. If you are a member of the apple developer program, I would strongly suggest visiting this forum: https://devforums.apple.com/message/927476

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

W

宽

回答by Mihhail Lapushkin

EDIT 2:

编辑2：

Does not work since iOS 7.1

自 iOS 7.1 起不起作用

EDIT:

编辑：

Some games have adopted an overlay that hints the player to scroll away the barsand then locks scrolling until bars pop out again. In this case position: fixedhelps a lot, as it stabilizes the movement (can't explain it better, just have to try it for yourself). This game is a good example of such approach:

www.paf.com/mobile/launch/flowers.html (sorry, can't post more than 2 links)

Recently I have also stumbled upon a hack that deactivates navigation bar triggering for the top area. All you have to do is add a random element to your DOM with following styles:

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

Read more about it here.

在此处阅读更多相关信息。

回答by f1lt3r

If you are creating a web-app, you can create a link to the URL from the home screen; and use the following HTML Meta Tags:

如果您正在创建 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">

This will super-impose the indicators over your header/nav bar. (The indicators you see on all the iPad screens.

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

For more info, see: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

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

回答by jfaron

Hopefully this helps someone, but I didn't want to set my viewport width=device-width.. because its 480px on iphone 4.. and I want my game to be at 800px for all devices.

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

And if you don't set it, then minimal-ui doesn't register.

如果您不设置它，则 minimum-ui 不会注册。

My work around is doing:

我的工作是做：

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

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

And then changing the viewport once the page is loaded:

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

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

I'm pretty shocked it works. The address bar and lower UI buttons only appear if the user clicks the top/bottom of the screen. Love it now.

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

回答by Brover

This solution worked for me, but in my case, the webapp was for a private public, where I had control of the Ipad that would be used.

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

I tried to use all possible meta tags and hacks, and really, after IOS8 have removed the minimal-ui feature, was practically impossible to solve.

我尝试使用所有可能的元标记和 hacks，实际上，在 IOS8 删除了 minimum-ui 功能之后，几乎无法解决。

Thinking outside the box, our team reached a nice solution:

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

The Mercury browser opens in fullscreen, and even when pages are being charged, the address bar does not appear. It is a small icon on the bottom right and only :) It worked perfectly for our problem!

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

But I repeat: do not use it if you are developing a webapp for the public in general. It's terrible for the UX force your user to download a different browser to access the app.

但我再说一遍：如果您正在为一般公众开发 web 应用程序，请不要使用它。UX 强制您的用户下载不同的浏览器来访问应用程序，这很糟糕。

UPDATE

更新

A developer friend of mine came up with this solution:

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

Use a webview inside of Titanium from appcelerator. It won't be aproved on Apple store, but for a private event, it'll work just fine!

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