移动端你还在用vh做适配吗？

由于vh在移动端各浏览器上表现不一，有很多是适配问题，如果有tabbar的话， 很容易被遮挡，现在都推荐大家用dhv。

先说一下hv的毛病：

20240827154922.jpg

再看看什么是dhv：

20240827154932.jpg

浏览器支持情况：

20240827154948.jpg

注意：在不支持dhv的情况下， 需要我们手动撸一下下面的代码：

// 首先我们获得视口高度并将其乘以1%以获得1vh单位的值
  let vh = window.innerHeight * 0.01;
  // 然后，我们将——vh自定义属性中的值设置为文档的根
  document.documentElement.style.setProperty('--vh', `${vh}px`);
  // 监听resize事件 视图大小发生变化就重新计算1vh的值
  window.addEventListener('resize', () => {
    // 我们执行与前面相同的脚本
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  });

使用：

 height: calc(100dvh);
// 降级
 height: calc(var(--vh, 1vh) * 100);