视窗单位※一直都存□□□□在争议，部分原因□□□是因为移□□□□动端浏览□□□□器对如何□□□实现视窗▽单位有着□□□□自己的看□□□□法，这样就让□□□□本来简单□□□□的事情变◢得更加复□□杂化。
一个典型的示例是：
vw的计算是否要包含浏览器的滚动条？
那么网站的导航或页面控件呢？
这些应该算在计算中吗？
还有一些设备本身的物理属性（比如iPhone X的刘海）是不容忽视的。
首先，了解一下背景
有关于如□□何计算视□□□□窗单位的□□规范描述□□的相当模□□糊。对于移动□□□设备，我们通常◇关心的是□□□高度，所以让我◢们具体来□□看一下视□□□窗单位中☆的vh：
vh unit：Equal to 1% of the height of the initial containing block.
直译过来，大致的意思是“vh等于初始包含块高度的1%”。
所以，在处是设备和特定的浏览器的区别方面，没有明确的指导。
vh最初是由□□□浏览器的◇当前视窗□□□计算的。如果你打□□□□开浏览器□□□开始加载•一个网站，1vh等于你屏□□□□幕高度的1%（减去浏览□□□器界面）。
1vh = window.innerHeight。
但是！如果你开始滚动，那就另当别论了。一旦你通过了一个浏览器界面，比如地址栏，vh值就会更新，结果就是内容的跳跃。
iOS的Safari浏览器是最早更新其实现的移动端浏览器之一，它选择根据屏幕的最大高度为vh的计算值（为vh定义一个固定值）。这样，一旦地址栏离开视窗，用户在页面上也不会看到内容的闪跳。
虽然使用固定值很好，但这也意味着如果地址栏在视窗中，就不能有一个全屏高度的元素。元素的底部将被裁剪。
正如上图所示，当地址栏在视窗中时（左图），元素的底部被裁剪，但我们想要的是元素底部不被裁剪（右图）。
CSS自定义属性：调整大小的技巧
我突然想□□□到，CSS自定义属□□□性和几行JavaScript代码可能□□□是获得所□□□需的一致□□和正确大•小的完美□□解决方案。
在JavaScript中，你始终可□□□以使用全丨局变量window.innerHeight获得当前□□□□视窗的值。这个值考□□□□虑了浏览□□□□器的界面，并在其可□□见性（visibility）发生变化□□时进行了※更新。诀窍就是□□将视窗（viewport）值存储在CSS自定义属□□性（CSS变量）中，并将其应□□用于元素，而不是vh单位。
假设我们□□在例子中□□□□设置一个CSS自定义属□□□□性：--vh。这意味着□□□我们将在CSS像下面这·样使用这○个自定义□□□属性：
.my-element {
height: 100vh; /* 为不支持自定义属性的浏览器做降级处理 */
height: calc(var(--vh, 1vh) * 100);
}
好了，这就搞定□□了，就是这么□□□□的简单。现在让我◤们使用JavaScript来获得视□□窗的内部□□高度（window.innerHeight）：
// 首先获取视窗高度，再乘以1%得到vh单位的值
let vh = window.innerHeight * 0.01;
// 把--vh的值设置到文档的根元素中
document.documentElement.style.setProperty('--vh', `${vh}px`);
因此，我们告诉JavaScript获取视窗□□的高度，然后占这□□□□个值的1%，所以我们□□□□就可以将☆值指定为□□□视窗高度□□单位值。然后使用JavaScript在:root中创建CSS自定义属□□□性--vh。
因此，我们现在□□□就可以像◇使用其他▼单位一样□□□使用--vh作为高度❖值，然后乘以100就能得到★我们想要□□□的高度值。
亲自体验·一下，调整视窗□□的高度，在根元素html中可以看□□到--vh值是动态□□□□变化的：
还有一个小细节
虽然我们□□□□的工作看□□□□上去已经□□□完成了，但是对于□□□□追求细节●的同学而◈言，可能已经□□□发现了，当视窗的□□□高度改变◆时，不会自动□□□更新元素□□□□的大小。那么我们□□□□接着在上□□□□面的示例□□□□上进行调□□□整。
我们可以□□□监听window的resize事件来更□□□新--vh的值。如果用户□□□旋转设备□□屏幕，比如从横□□向到纵向，或者导航□□移动到滚□□□动视窗之•外，这样就非□□常方便。
// 监听resize事件
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
更新--vh的值将会◤触发页面□□□□重绘，用户可能△会感觉页□□□□面在跳动。因此，我并不是□□□□说这个技□□□巧应该用□□□□于每个项★目，或者替换vh单位的所□□□有用法，但是只有□□□当你需要□□□□你的用户◣拥有一个□□确切的视□□□□窗单位值●时才使用。
此外，你可能希□□□望resize事件实现debounce方法，以避免在☆用户调整●浏览器窗□□□□口大小时□□触发许多●事件。
