WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

iOS SafariのURLメニュー問題

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

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現在状態の「高さ」 
svminsvwsvhの小さい方 
lvminlvwlvhの小さい方 
dvmindvwdvhの小さい方 
svmaxsvwsvhの大きい方 
lvmaxlvwlvhの大きい方 
dvmaxdvwdvhの大きい方 
sviメニューなどのUI表示時の「インライン方向のサイズ」viewport inlineの「vi」?
lviメニューなどのUI非表示時の「インライン方向のサイズ」 
dviメニューなどのUI現在状態の「インライン方向のサイズ」 
svbメニューなどのUI表示時の「ブロック方向のサイズ」viewport blockの「vb」?
lvbメニューなどのUI非表示時の「ブロック方向のサイズ」 
dvbメニューなどのUI表示時の「ブロック方向のサイズ」 

現状はSafariのみですが、今後他のブラウザでも対応されていきそうです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね