手機的 safari, chrome 瀏覽器 100vh 的問題

最近在寫的網站因為需要把內容鎖定在一個頁面的高度，本來在電腦版很自然會想到用 100vh 去設定，但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高，可是他真的是一個螢幕高，也就是手機瀏覽器的 header 跟底下的 nav 會把螢幕蓋掉，這樣就會發生你開的時候有一部分被遮掉了，這個用這張圖來看就很清楚。



查了一下這在 safari 是一個一直存在的問題，後來連手機的 chrome 也會有這樣的情況，還好後來有找到方法試了一下有用就紀錄一下。

css 要改這樣

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

再加一段 js 去判斷要調整的高度。

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

有興趣研究原理的話可以看這篇：
The trick to viewport units on mobile