iOS 15.4で追加されたCSS単位「dvh」が高さ100%問題を解決する

iOS 15.4でSafariに様々なアップデートがありましたが dvh という単位が追加されたことがWeb開発において大きな意味を持ちます。 これまでiOS Safariではスクロールを始めるとURLバーが小さくなり画面のサイズが変わるという問題がありました。 そのため高さ100%を「URLバーが大きい状態」と「URLバーが小さい状態」のどちらかで設定する必要があり、現在のURLバーの状態を反映した高さ100%をCSSだけで実現することは難しかったのです。 これを解決するのが dvh です。 結論 これまで height: 100%; や height: 100vh; と記述していた部分を height: 100dvh; と記述すればOK。 これまでの解決策 これまでiOS Safariで高さ100%を実現するためにはいくつかのパターンがありました。 パターン1: 100% パーセントで

[boxshiitake]

vhの仕様を変えるのじゃ駄目だったのか

[xlc]

私はあり得る最大の高さを得るために100vhを使っているので、局面によって実際の値が変わるdvhでは意味が変わってしまう。つまり2つは分けないといけないのよ。

[takyam1213]

vhをとにかく最大高にしといてくれたらよかってん

[efcl]

dvhについて

[mumei-0]

“URLバーの状態を反映した高さ100%をCSSだけで実現することは難しかったのです。 これを解決するのが dvh です。”

[iseebi]

実質使えるのは3年後くらいなので覚えておく

[mitaro]

“必ずフォールバックとセットで使用しましょう。” なるほど。これならいけるのか。……んー……仕方ないけど美しくないなぁ……

[cartman0]

heightやvhじゃ駄目ってのが分かりづらいのよな

[yarumato]

“これまでiOS Safariではスクロールを始めるとURLバーが小さくなり画面のサイズが変わるという問題がありました。そのため現在のURLバーの状態を反映した高さ100%をCSSだけで実現することは難しかった。解決するのが dvh”