禁止隐藏移动设备上的地址栏答案

【问题标题】：Disable hiding of address bar on mobile禁止隐藏移动设备上的地址栏
【发布时间】：2014-04-19 00:49:09
【问题描述】：

我正在开发一个移动网站，该网站的“页面”具有 div，占据了整个屏幕，您可以在每个页面之间滚动。问题是，每当用户向下滚动时，窗口都会调整大小，因为地址栏隐藏了。当您滚动到完整的底部并且地址栏随后隐藏时，这会导致问题。

是否可以让地址栏始终显示在移动设备上？

【问题讨论】：

相信你可以让<body>的高度和视口一样，给<body>添加滚动条。

【解决方案1】：

您可以使用 div 包装您的 HTML 并执行以下操作：http://jsfiddle.net/DerekL/Fhe2x/show

$("html, body, #wrapper").css({
    height: $(window).height()
});

它适用于 Android 和 iOS。

【讨论】：

啊，我明白了。所以 div 与 body 大小相同，但可以滚动。这可能有效，我会尽快尝试。谢谢！
这太棒了。此外，如果您需要保留多个 div（可能是因为您有锚点或固定滚动的 javascript 函数），您可以将 Derek 的示例应用于每个“fullpage-div”：滚动时地址栏不会消失，但会出现不要调整大小问题。然后，您可以在不滚动“错误”的情况下保持全屏模式）。刚刚在带有 Chrome 的 Android 5.0 上进行了测试。

【解决方案2】：

实现这一点的最简单方法是在容器中滚动，而不是滚动文档。

例如：

<html><body>
  <div id="scrollable-content"> ... all your content here ... </div>
</body></html>

html, body {
  height: 100%;
}

#scrollable-content {
  height: 100%;
  overflow-y: scroll;
}

【讨论】：

【解决方案3】：

你在看 iPhone 吗？我不了解 Android，但在 iOS 7 for iPhone 上这是不可能的。您可以做的一件事是使用minimal-ui 拥有一个始终最小化的导航栏，保持窗口大小一致：

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

http://visuellegedanken.de/2014-03-13/viewport-meta-tag-minimal-ui/

希望对你有帮助！

【讨论】：

谢谢，但我想要完全相反的。我目前正在关注 Android，但我会在某个时候关注 iOS 浏览器。
更新：minimal-ui 从 iOS 8 中消失了。