如何在 iPhone / HTML5 中完全隐藏导航栏

Question

我对移动 HTML5 真的很陌生。我将 jQuery Mobile 用于我当前的应用程序，但我在隐藏导航栏时遇到了一些问题。

我找到了这个网站：http: //m.somethingborrowedmovie.warnerbros.com/ 。 （我粘贴此链接不是为了宣传这部电影。）

我只是对这个 HTML5 网站感到惊讶。有谁知道用于隐藏导航栏的方法吗？

菜单也做得很好。是否有任何框架可以构建这样的应用程序？

原文由 Luc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试以下操作：

1. 在 HTML 文件的 head 中添加这个 meta 标签：

    <meta name="apple-mobile-web-app-capable" content="yes" />

1. 在 iPhone 上使用 Safari 打开您的网站，并使用书签功能将您的网站添加到主屏幕。

2. 返回主屏幕并打开已添加书签的站点。 URL 和状态栏将消失。

只要您只需要使用 iPhone，您就可以使用此解决方案。

此外，您在 warnerbros.com 站点上的示例使用了 Sencha touch 框架。您可以通过 Google 获取更多信息或 查看他们的演示。

原文由 Minh Le 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Remy Sharp 在他的文章 “正确操作：跳过 iPhone 网址栏” 中对该过程进行了很好的描述：

让 iPhone 隐藏 url 栏相当简单，您需要运行以下 JavaScript：

 window.scrollTo(0, 1);

但问题是什么时候？一旦高度正确，您必须执行此操作，以便 iPhone 可以滚动到文档的第一个像素，否则它会尝试，然后加载高度，迫使 url 栏返回查看。

您可以等到图像加载完毕并且 window.onload 事件触发，但这并不总是有效，如果所有内容都被缓存，事件触发得太早并且 scrollTo 永远没有机会跳转。这是一个使用 window.onload 的例子：http: //jsbin.com/edifu4/4/

我个人使用 1 秒的计时器 - 在移动设备上等待渲染的时间足够了，但时间足够长，不会触发得太早：

 setTimeout(function () {   window.scrollTo(0, 1); }, 1000);

但是，如果它是 iPhone（或只是移动）浏览器，您只希望设置它，所以偷偷摸摸（我通常不鼓励这样做，但我对此很满意，以防止“普通”桌面浏览器跳转一个像素):

 /mobile/i.test(navigator.userAgent) && setTimeout(function
() {   window.scrollTo(0, 1); }, 1000);

最后一部分，也是我在网络上看到的一些示例中似乎缺少的部分是：如果用户专门链接到一个 url 片段，即 url 上有一个哈希，你不想跳。因此，如果我导航到 http://full-frontal.org/tickets#dayconf - 我希望浏览器自然滚动到 id 为 dayconf 的元素，而不是使用 scrollTo(0, 1) 跳到顶部：

 /mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () {   window.scrollTo(0, 1); }, 1000);​

在 iPhone（或模拟器） http://jsbin.com/edifu4/10 上试试这个，你会看到它只会在你登陆没有 url 片段的页面时滚动。

原文由 bnabilos 发布，翻译遵循 CC BY-SA 3.0 许可协议