SafariのURLメニュー部分も考慮できるCSSの単位「dvh」
iOS 15.4のSafariからは新しい単位が追加されました。
その中でも「dvh」という単位が非常に便利で、いままでiOS Safariで高さ100%の状態を指定するのはかなり面倒でしたが、それが解消されます。
iOS SafariのURLメニュー問題
iOS Safariでは、下にスクロールするとメニューバーが小さくなって隠れ、上にスクロールするとメニューバーが大きくなります。
100vh
という指定の仕方もありますが、これだとメニューバーが隠れた状態の高さ100%になるので、メニューバーが表示された状態での高さ100%を指定するのは面倒でした。
「dvh」単位の使い方
高さの指定時に単位として「dvh」を指定するだけで、メニューなどのUI状態も考慮した高さ100%を実現できます。
height: 100dvh;
ただし、この単位はiOS 15.4以降のSafariでしか対応していないので、その前に従来の単位で高さ指定をしておきます。
height: 100vh;
height: 100dvh;
これならiOS Safariでは「100dvh」が適用されて、それ以外のブラウザでは「100dvh」の指定が読み込まれず、その前に指定されてある「100vh」が適用されます。
dvh以外の単位
dvh以外にもいくつかの単位が追加されています。
追加された単位には先頭に「sv○」「lv○」「dv○」が付いていて、それぞれ下記の意味があります。
- sv○:メニューなどのUI表示時の○○
- lv○:メニューなどのUI非表示時の○○
- dv○:メニューなどのUI現在状態の○○
単位 | 意味 | 備考 |
---|---|---|
svw | メニューなどのUI表示時の「横幅」 | |
lvw | メニューなどのUI非表示時の「横幅」 | |
dvw | メニューなどのUI現在状態の「横幅」 | |
svh | メニューなどのUI表示時の「高さ」 | |
lvh | メニューなどのUI非表示時の「高さ」 | |
dvh | メニューなどのUI現在状態の「高さ」 | |
svmin | svw とsvh の小さい方 | |
lvmin | lvw とlvh の小さい方 | |
dvmin | dvw とdvh の小さい方 | |
svmax | svw とsvh の大きい方 | |
lvmax | lvw とlvh の大きい方 | |
dvmax | dvw とdvh の大きい方 | |
svi | メニューなどのUI表示時の「インライン方向のサイズ」 | viewport inlineの「vi」? |
lvi | メニューなどのUI非表示時の「インライン方向のサイズ」 | |
dvi | メニューなどのUI現在状態の「インライン方向のサイズ」 | |
svb | メニューなどのUI表示時の「ブロック方向のサイズ」 | viewport blockの「vb」? |
lvb | メニューなどのUI非表示時の「ブロック方向のサイズ」 | |
dvb | メニューなどのUI表示時の「ブロック方向のサイズ」 |
現状はSafariのみですが、今後他のブラウザでも対応されていきそうです。