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

Question

我正在构建一个每个部分都使用 100vh 的网站。但是在移动浏览器上，这会导致一个糟糕的 UI，因为视口高度 increases/decreases 和地址栏的 hiding/displaying（例如 Chrome）。有什么方法可以防止地址栏在滚动时自动隐藏吗？

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

Answer 1

Is there any way to prevent the autohide of addressbar on scroll?

不幸的是，无法从 HTML 或代码 （至少我知道）.

固定地址栏

"Fake" 全屏模式：

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

显然，这仅适用于首次加载页面并向下滚动时 - 再次返回，它会显示地址栏。

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

方法如下：

编写一个简单的脚本并在您希望拥有的页面中使用它作为 "full-screen" - 或者如果您有一个模板页面供您网站的其余部分使用，请在其中使用该脚本。

您可以使用：

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

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

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

这 "tricks" 浏览器会认为您在页面加载时已经滚动，因此会自动隐藏地址栏。 这 may/may 不适用于某些浏览器。

再次强调 - 这不是对 "preventing autohide of addressbar on scroll" 的直接回答，但这可能会增强您的用户在首次访问页面时的体验。

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

希望这对您有所帮助！ :)

更新：

我对这个主题做了很多的深入研究，似乎还有其他方法可以强制浏览器成为 "full-screen"，并且还可以防止地址栏在滚动时重新出现 "up".

Prevent autohide of address bar on mobile browsers