CSS的视口单位听起来很棒。 若要设置元素的样式以占据整个屏幕的高度，请将height: 100vh设置为。 有一个完整的全屏元素，当视口大小改变时，它会调整大小。 可悲的是，事实并非如此。 100vh在移动浏览器中虽然很微妙，但被基本方法破坏，几乎没有用。 建议使用javascript设置高度以获得完整的视口体验，而不是避免100vh。
核心问题是移动浏览器(我在为你浏览。 Chrome和Safari ) )具有“帮助”功能，其中地址栏可能可见，也可能不可见，视口的显示大小已更改。 这些浏览器将浏览器高度设置为100vh，而不是在视口高度改变时将屏幕的可见部分调整为100vh，并隐藏地址栏。 结果，当看到地址栏时，屏幕底部被切掉。
如下所示。
显示地址栏时，移动浏览器会错误地将100vh设置为屏幕高度，而不显示地址栏，导致屏幕底部被断开。 在上图中，应该是隐藏在画面底部的按钮。 更糟的是，当用户第一次访问移动设备上的网站时，地址栏将显示在顶部，因此默认体验将是一种损坏的体验。
更好的解决方案： window.innerHeight解决此问题的一个方法是依靠javascript而不是CSS。 加载页面时，如果将高度设置为window.innerHeight，则高度将正确设置为窗口的可见部分。 如果显示地址栏，则window.innerHeight为全屏高度。 如果地址栏不可见，则window.innerHeight为屏幕上可见部分的高度。 这正如期待的那样。
在Wordsheet.io学习时可以看到这一点。 例如，尝试在移动浏览器中打开wordsheet.io/demo/V3Y。 无论是否显示地址栏，屏幕都是视口的高度。 此外，首次加载页面时将高度锁定在适当的位置，可以防止地址栏在使用该站点时隐藏，从而导致尴尬的屏幕大小调整体验。
遗憾的是，如果不依赖于JavaScript，则还没有简单的方法来将整个视口的高度占用到元素中。 height: 100vh非常接近，但考虑到移动设备的局限性，最好不要使用。
我的博客： http://caibaojian.com
公众号文章： http://t.cn/AiuNZVZG
掘金小册子8折： http://caibaojian.com/goods
点击原文和我的微信群，每天分享好文章。