CSS 中的视口单位听起来很棒. 如果要设置元素的样式以占据整个屏幕的高度, 则可以设置 height: 100vh , 您拥有一个完美的全屏元素, 该元素会随着视口的变化而调整大小! 可悲的是, 事实并非如此. 100vh 在移动浏览器中以微妙但基本的方式被破坏, 这使其几乎无用. 最好避免 100vh , 而是依靠 JavaScript 设置高度以获得完整的视口体验.
想学习前端技术的可以来我的前端直播授课 QQ 群: 733395506. 可以领取免费的学习资料.
核心问题是移动浏览器 (我正在为您浏览, Chrome 和 Safari) 具有 "帮助" 功能, 其中地址栏有时可见, 有时隐藏, 从而改变了视口的可见大小. 这些浏览器没有将 100vh 高度调整为视口高度变化时屏幕的可见部分, 而是将 100vh 设置为浏览器的高度, 并隐藏了地址栏. 结果是, 当地址栏可见时, 屏幕的底部将被切除.
如下所示:
当显示地址栏时, 由于移动浏览器错误地将 100vh 设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断. 在上图中, 应隐藏在屏幕底部的按钮. 更糟糕的是, 当用户首次访问移动设备上的网站时, 地址栏将在顶部可见, 因此默认的体验是破碎的体验.
更好的解决方案: Windows.innerHeight
解决此问题的一种方法是依靠 JavaScript 而不是 CSS. 页面加载时, 将高度设置为 Windows.innerHeight 可以将高度正确设置为窗口的可见部分. 如果地址栏可见, 则 Windows.innerHeight 将为全屏的高度. 如果地址栏是隐藏的, 则 Windows.innerHeight 将是屏幕上可见部分的高度, 这正是您所期望的.
在 Wordsheet.io 上学习时, 您可以看到这一点. 例如, 尝试在移动浏览器上打开 wordsheet.io/demo/V3Y . 无论地址栏是否可见, 屏幕都将是视口的高度. 此外, 通过在页面首次加载时将高度锁定在适当的位置, 可以防止地址栏隐藏在使用该网站的过程中, 从而带来尴尬的屏幕调整大小体验.
遗憾的是, 在不依赖 JavaScript 的情况下, 仍然没有一种简单的方法来使元素占据整个视口高度. height: 100vh 非常接近 , 但鉴于其在移动设备上的局限性, 最好避免使用它.
来源: http://www.jianshu.com/p/ea9c36884599