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

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

核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。 这些浏览器没有将 100vh 高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为浏览器的高度，并隐藏了地址栏。 结果是，当地址栏可见时，屏幕的底部将被切除。

如下所示：

当显示地址栏时，由于移动浏览器错误地将 100vh 设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。 在上图中，应隐藏在屏幕底部的按钮。 更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。

更好的解决方案：windowinnerHeight

解决此问题的一种方法是依靠javascript而不是CSS。 页面加载时，将高度设置为 windowinnerHeight 可以将高度正确设置为窗口的可见部分。 如果地址栏可见，则 windowinnerHeight 将为全屏的高度。 如果地址栏是隐藏的，则 windowinnerHeight 将是屏幕上可见部分的高度，这正是您所期望的。

在Wordsheetio上学习时，您可以看到这一点。 例如，尝试在移动浏览器上打开 wordsheetio/demo/V3Y 。 无论地址栏是否可见，屏幕都将是视口的高度。 此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。

遗憾的是，在不依赖  JavaScript  的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。

与窗口相关的尺寸有视口宽度clientWidth、浏览器外宽outterWidth、浏览器内宽innerHeight，视口高度clientHeight、浏览器外高outterHeight、浏览器内高innerHeight， 这几个尺寸会因浏览器的不同略有差异。

上述三项测试在Chrome、IE11、Edge、Firefox、Safari 中测试通过。

clientWidth、outterWidth、innerHeight 的值均一致，safari 的 outterWidth 和 outerHeight 均为0。而且 clientWidth、outterWidth、innerHeight 三个值均会随着浏览器地址栏和工具栏的显示或隐藏而发生变化，也就是说浏览器大小、视口是一起发生变化的。

offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（含padding）、（可见的）水平滚动条高度、 上边框高度和下边框高度。这个高度可以用来检测元素的可见区域。

offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（含padding）、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。这个高度可以用来检测元素的可见区域。

offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。

clientWidth: 指的是元素内容及其内边距所占据的空间大小，不包含border，滚动条空间不计算在内。

注意：滚动条一般是位于border的内边缘，盖住了padding，但是不占用padding的空间。

scrollHeight: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总高度。

scrollWidth: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总宽度。

scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

带有垂直滚动条的页面总高度：documentdocumentElementscrollHeight，如果想要获取文档高度，需要找到 scrollHeight 和 clientHeight 中的最大值。

参考文献：

《高级语言程序设计 第三版》

vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1%  视口高度。

CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% 视口高度。

视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。 当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，也只有基于Gecko的浏览器才会动态更新视口值。

结合 overflow:auto，滚动条最终占用的空间大小不是减去视口大小之后的宽度，而overflow:scroll 才是。

以上就是关于在移动前端上避免使用100vh单位全部的内容，包括:在移动前端上避免使用100vh单位、浏览器中常见尺寸的差异、vh是什么意思等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！