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

Question

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

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

Answer 1

有什么办法来防止地址栏上滚动的自动隐藏？

遗憾的是，没有办法从脚HTML或代码地址栏（据我所知，至少）。

“假”全屏模式：

相反，你可以考虑迫使地址栏自动隐藏在页面加载时，给一个更好的全屏体验。

显然，这只适用于第一次加载页面并向下滚动时 - 再次备份时，它会显示地址栏。

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

方法如下：

写一个简单的脚本，并在页面（S）使用它，你希望拥有的“全屏幕” - 或者，如果你有一个模板页，你的网站的其余部分使用，在那里使用脚本。

您可以使用：

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

希望这会有所帮助！ :)

UPDATE：

我做很多更多挖这个问题上，有似乎也有其他的方法，你可以强制浏览器应运而生“全屏幕”，还可以防止滚动“向上”时地址栏重新显示。

看到这里：http://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803为一些（大量）的建议。