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のみですが、今後他のブラウザでも対応されていきそうです。
