防止在移动浏览器上自动隐藏地址栏

Question

我正在构建一个每个部分使用 100vh 的网站。但是在移动浏览器上，这会导致 UI 不好，因为视口高度会随着地址栏的隐藏/显示而增加/减少（例如在 Chrome 上）。有什么办法可以防止地址栏在滚动时自动隐藏？

Freelancer 网站有一个解决这个问题的实现。有人可以解释这是如何完成的吗？ https://m.freelancer.com

Answer 1

有什么办法可以防止滚动时地址栏自动隐藏？

不幸的是，没有办法从 HTML 或代码中固定地址栏（至少我知道）。

“假”全屏模式：

相反，您可以考虑在页面加载时强制地址栏自动隐藏，以提供更好的全屏体验。

显然，这仅适用于首次加载页面并向下滚动 - 再次备份，它将显示地址栏。

我倾向于发现大多数移动设计的网站需要用户向下滚动很多次，然后导航到另一个页面。

方法如下：

编写一个简单的脚本并在您希望“全屏”的页面中使用它 - 或者如果您有一个模板页面供您网站的其余部分使用，请使用其中的脚本。

你可以使用：

<script type="text/javascript">
    window.onLoad = function() {        
        window.scrollTo(0,1);
    }
</script>

或者，如果您使用的是 jQuery：

<script type="text/javascript">
    $(function() {
        $(window).scrollTo(0,1);
    }
</script>

这会“诱使”浏览器认为您在页面加载时已经滚动，因此会自动隐藏地址栏。 这可能/可能不适用于某些浏览器。

再说一遍 - 这不是“防止滚动时自动隐藏地址栏”的直接答案，但这可能会增强您的用户在首次访问页面时的体验。

我使用：http://www.html5rocks.com/en/mobile/fullscreen/ 作为参考 - 看起来，还有很多其他想法。

希望这会有所帮助！ :)

更新：

我在这个主题上做了很多更多的挖掘工作，而且似乎还有其他方法可以强制浏览器进入“全屏”状态，也可以阻止地址当滚动“向上”时，栏不会重新出现。

请参阅此处：http://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803 获取一些（大量）建议。