先日、ビューポートに基づく相対単位(vw・vh)の仕様と使い方について【CSS】でiOS(主にsafai)の場合は100vhを指定するとアドレスバーなどの高さ分だけ表示が隠れる(ずれる)事を簡単に解説しました。
今回は、その問題を解決できるビューポート単位であるsvh・lvh・dvhについて解説していきます。
ビューポートとは
ビューポートとは、Webサイトの内容が表示される画面(ブラウザ)の表示領域の事を言います。
これだけ聞くと小難しい感じがしますが、ざっくりいうとブラウザの幅・高さの事です。
ビューポートと聞くと、meta要素のname属性の値のviewportかと思われる方もいるかと思いますが、今回は先程述べたような画面の表示領域のビューポートとなります。
height: 100vh;について
ビューポートに基づく相対単位(vw・vh)の仕様と使い方について【CSS】でiOS(主にsafai)の場合は100vhを指定するとアドレスバーなどの高さ分だけ表示が隠れる(ずれる)事を簡単に解説しましたが、下記の図のようにアドレスバーやツールバーの部分は隠れてしまいます。
ビューポート単位svh・lvh・dvhについて
height: 100vh;に頭を抱えていた方も多いかと思います。そんな時に使えるのが、新たな単位であるsvh・lvh・dvhとなります。
- svh(Small Viewport Height)
アドレスバーやツールバーが出ている状態のビューポートの高さ - lvh(Large Viewport Height)
アドレスバーやツールバーが格納されている状態のビューポートの高さ
※vhと同じと思っていただいて大丈夫かと思います - dvh(Dynamic Viewport Height)
アドレスバーやツールバーの有無(画面状況)によってsvh・lvhが切り替わりビューポートの高さが可変となる
それぞれの単位については上記の通りとなります。
ブラウザの種類やバージョンによって、アドレスバーやツールバーの位置などが違う場合もありますが概ね上記のような感じだと思ってもらって大丈夫です。
svh・lvh・dvhの使い方
次にそれぞれの記述の仕方についてです。特別複雑な記述はありませんので、以下の通りに記述していただければ大丈夫です。
/* svh */
div {
height: 100svh;
}
/* lvh */
div {
height: 100lvh;
}
/* dvh */
div {
height: 100dvh;
}古いバージョンのブラウザは対応していないものもありますので、対応が必要な場合はvhとの併記をするようにしてください。
さいごに
いかがでしたでしょうか。
今回は、CSSのsvh・lvh・dvhを使ってビューポートサイズに合わせた表示にする方法について解説しました。
これまで悩ませていた100vhの問題を解決できるものになりますので、しっかりと各特長を捉えて使えるようにしていきましょう。
