
iOSで100vhにする方法3選
公開日:
2022.04.27
iOSのsafariで100vhを実現しようとすると、アドレスバーの有無やスクロール時にアドレスバーが細くなったり太くなったりすることを考慮する必要があり、ただ単に100vhを指定してもうまくいきません。そこで今回はアドレスバーを考慮した100vh表示になる方法をまとめました。
①-webkit-fill-availableを使う
htmlのheightと100vhにしたい要素のmin-heightに-webkit-fill-availableを指定します。
html {
height: -webkit-fill-available;
}
.element {
min-height: 100vh;
min-height: -webkit-fill-available;
}
※100vhでない表示(例えば80vhなど)には設定できません。
②Javascriptを使う
JavascriptとCSS変数を使った方法です。
const setFillHeight = () => {
const vh = window.innerHeight * 0.01;//ビューポートの高さを取得し、0.01を掛けて1%の値を算出して、vh単位の値を取得
document.documentElement.style.setProperty('--vh',`${vh}px`);//カスタム変数--vhの値をドキュメントのルートに設定
}
window.addEventListener('resize', setFillHeight);//画面のサイズ変動があった時に高さを再計算
setFillHeight();//初期化
.element {
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
}
レガシーブラウザ以外に対応できる安定の方法です。
③100dvhを使う
iOS15.4以上で使えるようになった新しい方法です。
.element {
min-height: 100vh;
min-height: 100dvh;
}
現時点ではchromeで対応していませんが、今後主流になっていきそうです。
Can I use:Large, Small, and Dynamic viewport units
参考:
これからはこの実装がオススメ! iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
iOS 15.4で追加されたCSS単位「dvh」が高さ100%問題を解決する
\弊社では一緒に働いてくれる仲間を募集しております/
エントリーはこちらから▼
