导读
在移动端使用vh时，想必大家也遇到很多坑。这篇文章很好的解释了为什么100vh在移动端中的兼容性那么差的问题，以及大小尺寸下的视窗单位的作用分别是什么。最后还介绍了css中的新单位，动态视窗。
viewport及其单位
译者注：viewport：视窗。即可视窗口，是指在浏览器中除工具栏外的所有可视区域。
要调整像视窗这么高的尺寸，可以使用vw和vh单位。
- 1
vw= 视窗宽度的1% - 1
vh= 视窗高度的1%
给一个元素100vw的宽度和100vh的高度，它将会完全覆盖视窗。
一个淡蓝色元素设置为100vw 由100vh，覆盖整个视窗。
视窗本身使用蓝色虚线边框表示vw和vh单位在浏览器上还存在这些附加单位
- 1
vi= 视窗内联方向尺寸的1% - 1
vb= 视窗块轴方向尺寸的1% vmin= 最小的vw或vhvmax= 最大的vw或vh
这些单位有良好的浏览器支持。
谷歌: 20 | 火狐: 19 | Edge: 12 | Safari: 6
为什么需要新的视窗单位
虽然现有的视窗单位在PC端上运行良好，但在移动端就不一样了。在这里，视窗大小受到UA UI的影响。
译者注：
- UI：user interface，用户界面。
- UA：UserAgent，作为浏览器的标识。
虽然视窗大小会变化，但是vw和vh大小不会更改。因此，100vh高的元素将会超出视窗。
100_vh_在移动端加载显得太高了
当向下滚动时，这些动态工具栏会收回。这时候，100vh高的元素刚好覆盖整个视窗。
当动态工具栏收回时，100_vh_在移动端显示是“正确的”
为了解决这个问题，视窗的各种状态已经在CSS工作小组中指定。
译者注：CSS工作小组，是W3C在1997年创建的工作小组，目的是解决CSS level 1 没有解决的问题。
- Large viewport（大视窗）：视窗大小假设工具栏是动态扩展和默认收回的。
- Small viewport（小视窗）：视窗大小假设工具栏是动态扩展和默认展开的。
大视窗和小视窗的可视化
新的视窗也有分配给它们的新单位：
- 表示大视窗的单位的前缀是
lv，单位有：lvw、lvh、lvi、lvb、lvmin、lvmax。 - 表示小视窗的单位的前缀是
sv，单位有：svw、svh、svi、svb、svmin、svmax。
这些视窗百分比单位的大小是固定的，除非视窗本身被调整大小。
除了大视窗和小视窗，还有一个动态视窗，它动态考虑了UA UI：
- 当工具栏展开时，动态视窗等于小视窗的大小。
- 当工具栏收回时，动态视窗等于大视窗的大小。
动态视窗附带的单位为是dv前缀的：dvw、dvh、dvi、dvb、dvmin、dvmax。它们的大小在lv和sv之间。
这些单位在比较新的浏览器版本中已经得到了全面支持。
谷歌: 108 | 火狐: 101 | Edge: 108 | Safari: 15.4
在没有动态的UA UI的浏览器中，比如谷歌的PC版浏览器，大视窗、小视窗、动态视窗的大小是相同的。
警告
关于视窗单位，有一些需要注意的事项：
- 视窗单位都是忽略滚动条大小的。在存在经典滚动条的浏览器中，大小为100
vw的元素会因此而变得很宽，这个是规格说明书： - 动态视窗的值不会以60fps的频率更新。在所有浏览器中，UA和UI的展开或者收回在更新时都会进行节流。有些浏览器甚至完全根据所使用的手势（缓慢滚动和滑动）在更新时进行防抖。
- 屏幕上的键盘（也称为虚拟键盘）不被认为是UA UI的一部分，因此它不会影响视窗单位的大小。在谷歌浏览器中，你可以变更这个设置，让虚拟键盘的高度也影响视窗高度。
