毎度毎度悩まされるiOSで100vh上手くいかない問題…
私はJSで100vh設定派だったのですが、iOSのアドレスバーが小さくなったり大きくなったり…その対応が難しく困っていました。
100dvhという単位
iOS15.4から、100dvhという単位が登場しました！
100dvhはUIを除いた現在のビューポートの高さです。
その他、svhとlvhという単位もあります。
svhはsmall viewport heighで、UIが最大の時のビューポートの高さ。
lvhはlarge viewport heighで、UIが最小の時のビューポートの高さ。
なので、コロコロ変わるUIの高さに対応したい場合はdvhを使うことになりますね。
使い方
dvhは非対応ブラウザもありますので、必ずvhのフォールバックを！
height: 100vh;
height: 100dvh;必ず100vhとセットで使います✊
今までの方法の中で一番簡潔で簡単です…素晴らしい…😭
