JavaScript

[JavaScript]100vhのモバイル対応はJavaScriptの利用がおすすめ

全画面表示させたいページを作るとき100vhや100%がよく使われますが、スマートフォンで見た際、スクロール時に検索バーが隠れるとvhの値も変わり、結果として全画面要素がの高さがガクッと変わってしまうのでちょっと見づらくなります。

この問題を解決するベストなやり方はJavaScriptを使ってページローディング時に100vh分の高さを取得して、それを固定値の変数として保存、その変数をCSS内で利用する方法です。

JavaScript
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

CSS
.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

このJavaScriptをリサイズ対応させることも可能ですが、そうすると結局またガクッと高さが変わって見づらくなるのでリサイズ対応はしない方がいいと思う。

参考
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/