【CSS】iOSのSafariで「100vh≠ビューポートの高さ」に対応できる新しい単位「lvh」「svh」

まだ実際に使ってはいないのですが、今後使う機会がきっとあるだろう！ということでまとめ。
iOS の Safari で 100vh がビューポートの高さではないという仕様に対応出来る単位「lvh」「svh」についてまとめた記事を見つけたので紹介します。
ちなみに、Safari 15.4 で実装されたとのことなので、古いバージョンでは未対応です。

記事はこちら。

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる | コリス
https://coliss.com/articles/build-websites/operation/css/large-small-dynamic-viewports.html

追加された単位は下記のとおりです。

• Large Viewport (lvw, lvh, lvmin, lvmax)
• Small Viewport (svw, svh, svmin, svmax)
• Dynamic Viewport (dvw, dvh, dvmin, dvmax)

まず、Large Viewport はアドレスバー等が表示されていない状態の画面のサイズを基準としています。
100lvh は、アドレスバー等が表示されていない状態の画面の 100% の高さになります。

次に、Small Viewport はアドレスバー等が表示されている状態の画面のサイズを基準としています。
100svh は、アドレスバー等が表示されている状態の画面の 100% の高さになります。

最後に、Dynamic Viewport は、アドレスバー等の表示/非表示が動的に考慮され、アドレスバー等の表示/非表示によって基準となる画面のサイズを自動的に調整してくれます。
100dvh は、アドレスバー等の表示/非表示によって、100svh ～ 100lvh の範囲の値になります。

iOS の Safari 以外での vh の挙動と同じなのは dvh ですね。
現在は、iOS の Safari に対応する必要のあるプロジェクトに関わっていないのですが、機会があればぜひ試してみたいと思います。

以上、iOS の Safari で100vh がビューポートの高さではないという仕様に対応できる新しい単位「lvh」「svh」についてでした。
ご参考になれば幸いです。