はじめに

スマホでブラウザを開くとメニューバーがある時にデザインが狂ったりしませんか？

そんな時にこちら

Safari15.4で新たに追加されたCSSの単位を利用すればすぐにメニューバーに狂わされることなく実装できます。

100svh, 100svw :メニューバーが表示されていない時の画面が１００になる
100lvh, 100lvw :メニューバーが表示された時の画面が100になる
100dvh, 100dvw :現在表示されている画面が１００になる(メニューバーがなければ100svhになり、あれば100lvhになる)

body {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
}

注: 2022/03/26現在Safari15.4しか対応していないのでheight:100vhも記述する必要がある

従来はメニューバーありの時のために

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

let vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);

と処理を追加したりしていましたが、単位指定すればすぐ実装できるのでかなり便利になりましたね。
現在はSafariでしか採用されていないため他のブラウザでも採用されるといいですね。

はじめに

そんな時にこちら

参考資料