iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。
そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。
ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。
『svh』について
『svh』では小さいviewportの方に合わせてくれます。
たぶんsmall viewport heightの略だと思います。
これを使えば先ほどのアドレスバーなどの分はみ出てしまう、などは解決します。が作成するサイトにもよりますが大きいviewportの時は注意が必要ですね。
『lvh』について
『lvh』はつまるところvhと同じような挙動をすると解釈していただいて大丈夫です。
たぶんLarge viewport heightの略だと思います。
『dvh』について
『dvh』では画面の動きに合わせて『svh』『lvh』どちらの役割も果てしてくれます。上で色々説明をしましたが、よっぽどのことがなければ『dvh』を使えば問題ないと思います。
おそらくこちらはDynamic viewport heightの略です。
ちなみに使い方としてはこのような形にしましょう。
|
1 2 3 4 |
.wrapper { height: 100vh; height: 100dvh; } |
なぜvhを先に書いているの？と思うかもしれませんが、最初にお話ししたようにiOS15.4以上から使用できる単位なので対応していない環境（もちろんandroidも含む）で見た時のために記述しておきましょう。
スマホでの表示は環境によってだいぶ異なるので困ることも多いですが、最近は対応できるcssも増えてきているので活用していきましょう。
