82

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

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

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

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

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

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

4

8 回答 8

119

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 上以横向模式引入的“全屏”按钮，这是一个让开发人员和用户满意的出色解决方案。

更永久地解决这个问题的完美候选者是移动 Safari 支持 HTML5 全屏 API（在 OS X 上的 Safari 上支持！）。唉，现在没有支持，而且历史上 iOS 点版本没有添加新的 Safari 功能，所以这可能是 iOS 8 的东西。

于 2013-09-20T13:23:19.770 回答
17

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

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

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

于 2013-12-16T15:24:43.593 回答
6

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

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

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

于 2014-01-10T14:49:30.417 回答
3

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

于 2013-12-16T15:02:37.060 回答
2

编辑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;


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

于 2014-01-20T16:53:12.237 回答
1

如果您正在创建网络应用程序，您可以从主屏幕创建指向 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

于 2015-05-28T14:54:44.400 回答
0

希望这对某人有所帮助，但我不想设置我的视口宽度 = 设备宽度 .. 因为它在 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​​ 按钮。现在喜欢它。

于 2014-06-25T20:28:39.503 回答
0

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

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

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

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

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

更新

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

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

于 2015-04-01T12:53:52.547 回答