视口单位听起来不错。如果你想设置元素的样式以占据屏幕的整个高度，你可以设置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，公众号回复前端，加入开发群掘金20%优惠册：http://caibaojian.com/商品
