Question

我正在建立一个每个部分使用100vh的网站。然而，在移动浏览器上，随着地址栏的隐藏/显示（例如在Chrome上）视口高度增加/减少，这会导致错误的UI。有没有办法阻止滚动地址栏的自动隐藏？

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/作为参考 - 从它的外观来看，还有更多其他想法。

希望这有帮助！：）

<强>更新

我已经完成了很多更多关于这个主题的挖掘工作，并且似乎还有其他方法可以强制浏览器成为“全屏”，并且还可以阻止地址滚动“向上”时重新出现。