東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

【CSS】iOSのSafariとvhの相性問題を解決する新しい単位「svh、lvh、dvh」の解説とサンプル

2022.06.20 Posted by

CSSの高さの単位dvh

こんにちは、ウェブラボクリエイターズメモです。

CSSで画面の高さいっぱいを指定する際「vh」という単位を使い「100vh」と指定できますが
iOSのSafariではアドレスバーと被ってしまい、イマイチな挙動をします。

その問題を解決する新しい単位「svh」「lvh」「dvh」がiOS15.4から追加されました。

これらの単位の解説と、実際のサンプルをご紹介します。

まずはDEMOをどうぞ。

(iOS15.4以上のSafariで開いてください)

2つのビューポート

iOSのSafariでは、スクロールすると上のアドレスバーと下のツールバーが隠れますよね。

その為、大きいビューポート小さいビューポートの2種類が存在します。

iOS safari 2つのビューポート

従来のvhは大きいビューポートを基準にしているので
小さいビューポートになった際に、下に隠れる部分が発生します

CSSの高さの単位vh

vhは大きいビューポートの高さの1%を1vhと定義した単位です。

lvh

2つのビューポートのうち、大きいビューポートを基準とした単位です。

定義的にも、vhと同じです。

CSSの高さの単位lvh

lvhは大きいビューポートの高さの1%を1lvhと定義した単位です。

svh

2つのビューポートのうち、小さいビューポートを基準とした単位です。

CSSの高さの単位svh

svhは小さいビューポートの高さの1%を1svhと定義した単位です。

dvh

大きいビューポートと小さいビューポートの変動に合わせ動的に変わる単位です。

これが使いやすいのではないかなと思います。

CSSの高さの単位dvh

dvhはインターフェースの展開に合わせて高さの1%を1dvhと定義した単位です。

暫らくはvhと併記すること

これらの新しい単位はiOS15.4より前のSafariでは機能しません。

必ず「vh」などフォールバックとセットで記述しましょう。

(余談)height: 100%;

htmlとbodyにheight: 100%;を書いた上で
height: 100%;とすることでも画面の高さを指定できます。

これは実際にはvhやlvhと同じ挙動をするようです。

DEMO

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278