在移动前端上避免使用100vh单位

CSS中的视口单位听起来很棒。 若是要设置元素的样式以占据整个屏幕的高度，则能够设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！ 可悲的是，事实并不是如此。 100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。 最好避免100vh ，而是依靠javascript设置高度以得到完整的视口体验。

核心问题是移动浏览器（我正在为您浏览，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