由于vh在移動端各瀏覽器上表現(xiàn)不一，有很多是適配問題，如果有tabbar的話， 很容易被遮擋，現(xiàn)在都推薦大家用dhv。

先說一下hv的毛?。?/p>

20240827154922.jpg

再看看什么是dhv：

20240827154932.jpg

瀏覽器支持情況：

20240827154948.jpg

注意：在不支持dhv的情況下， 需要我們手動擼一下下面的代碼：

// 首先我們獲得視口高度并將其乘以1%以獲得1vh單位的值
  let vh = window.innerHeight * 0.01;
  // 然后，我們將——vh自定義屬性中的值設(shè)置為文檔的根
  document.documentElement.style.setProperty('--vh', `${vh}px`);
  // 監(jiān)聽resize事件 視圖大小發(fā)生變化就重新計算1vh的值
  window.addEventListener('resize', () => {
    // 我們執(zhí)行與前面相同的腳本
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  });

使用：

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