# SafariのURLメニュー部分も考慮できるCSSの単位「dvh」 URL: https://webrandum.net/ios-safari-dvh/ 公開日: 2022-05-02 更新日: 2022-05-02 カテゴリー: コーディング タグ: CSS, Safari 出典: Webrandum（著者: サイトウ マサカズ） iOS 15.4のSafariからは新しい単位が追加されました。 その中でも「dvh」という単位が非常に便利で、いままでiOS Safariで高さ100%の状態を指定するのはかなり面倒でしたが、それが解消されます。 [![](https://www.google.com/s2/favicons?domain=webkit.org)WebKit![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/27b55f46fc2e27f841bb5c24946300cd111036850dc9b21d0d9d533c86e01efe.webp)New WebKit Features in Safari 15.4https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes.](https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/) ## iOS SafariのURLメニュー問題 iOS Safariでは、下にスクロールするとメニューバーが小さくなって隠れ、上にスクロールするとメニューバーが大きくなります。 ![iOS Safariの表示領域](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_1.png) `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のみですが、今後他のブラウザでも対応されていきそうです。