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

Question

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

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

score 2 · Accepted Answer

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

不幸的是，没有办法从 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/作为参考 - 从外观上看，还有很多其他想法。

希望这可以帮助！:)

更新：

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

1 回答 1