如何隐藏 iPhone 上的地址栏？

Question

如何隐藏 iPhone 上的地址栏？

到目前为止，我尝试了两种不同的方法：

• 在页面加载时使用 JavaScript 向下滚动一个像素的技巧

• 以及以下元标记：

   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />

还有这个：

 <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

我完全糊涂了。

PS：哦，我忘记了一件非常重要的事情：网页本身不会溢出浏览器窗口。这可能是 1 像素向下滚动技巧不起作用的原因。

我不能把它变大，因为设计很受欢迎，每个人都可以滚动，但是这个页面会折叠……:)

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

Answer 1

这是我自己打的。如果地址栏没有隐藏，原因可能只是页面不够长，无法滚动。

当。。。的时候

window.scrollTo(0,1)

被调用的页面 必须 比窗口长，这样才能发生滚动事件。

只有当滚动甚至发生时，移动浏览器才会隐藏地址栏。

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

Answer 2

🔴 更新： Apple 在 iOS 8 中 删除 了对 minimal-ui 的支持，所以这不再是一个有用的答案:(

---

对于研究这个的新 google 员工：从 iOS 7.1 开始，有一个新的 minimal-ui 模式适用于移动 Safari：

它通过在视口上设置 minimal-ui 属性来启用：

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

您还可以将它与其他属性结合使用，如下所示：

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

值得注意的是，没有最小内容长度要求，因为 scrollTo hack。 此处 对这种新模式有很好的概述。 （这就是上图的来源。）他还列出了一些缺点。

我能找到的唯一官方文档是 Apple 的 iOS 7.1 发行说明中的注释：

已为视口元标记键添加了一个属性 minimal-ui，它允许在页面加载时最小化 iPhone 上的顶部和底部栏。在使用 minimal-ui 的页面上，点击顶部栏会将栏带回来。在内容中轻敲再次关闭它们。

例如，使用 <meta name="viewport" content="width=1024, minimal-ui”> 。

当然，由于 这只适用于 iOS 7.1 及以上版本，它的用处可能会受到限制。

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