SafariのURLメニュー部分も考慮できるCSSの単位「dvh」

2022年5月2日

iOS 15.4のSafariからは新しい単位が追加されました。
その中でも「dvh」という単位が非常に便利で、いままでiOS Safariで高さ100%の状態を指定するのはかなり面倒でしたが、それが解消されます。

iOS SafariのURLメニュー問題

iOS Safariでは、下にスクロールするとメニューバーが小さくなって隠れ、上にスクロールするとメニューバーが大きくなります。

100vhという指定の仕方もありますが、これだとメニューバーが隠れた状態の高さ100%になるので、メニューバーが表示された状態での高さ100%を指定するのは面倒でした。

高さの指定時に単位として「dvh」を指定するだけで、メニューなどのUI状態も考慮した高さ100%を実現できます。

height: 100dvh;

ただし、この単位はiOS 15.4以降のSafariでしか対応していないので、その前に従来の単位で高さ指定をしておきます。

height: 100vh;
height: 100dvh;

これならiOS Safariでは「100dvh」が適用されて、それ以外のブラウザでは「100dvh」の指定が読み込まれず、その前に指定されてある「100vh」が適用されます。

dvh以外にもいくつかの単位が追加されています。
追加された単位には先頭に「sv○」「lv○」「dv○」が付いていて、それぞれ下記の意味があります。

単位	意味	備考
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表示時の「ブロック方向のサイズ」