動的ツールバーを備えたモバイル ビューポート用の新しい CSS ユニット。
ビューポートとその単位
ビューポートと同じ高さにサイズを設定するには、vw 単位と vh 単位を使用できます。
vw= ビューポート サイズの幅の 1%。vh= ビューポート サイズの高さの 1%。
要素の幅を 100vw、高さを 100vh に設定すると、ビューポート全体に表示されます。
ビューポート自体は、青い破線で示されています。
vw と vh のユニットは、これらの追加ユニットとともにブラウザで表示されました
vi= ビューポートのインライン軸のサイズの 1%。vb= ビューポートのブロック軸のサイズの 1%vmin=vwとvhのどちらか小さい方。vmax=vwとvhのどちらか大きい方。
これらのユニットは、ブラウザ サポートが良好です。
対応ブラウザ
- 20
- 12
- 19
- 6
新しいビューポート ユニットの必要性
既存の広告ユニットはパソコンでは問題なく機能しますが、モバイル デバイスでは動作が異なります。この場合、ビューポートのサイズは、動的ツールバーの有無によって決まります。アドレスバーやタブバーなどのユーザー インターフェースです。
ビューポートのサイズは変更できますが、vw と vh のサイズは変わりません。そのため、高さが 100vh のサイズの要素はビューポートの外に出ます。
下にスクロールすると、動的なツールバーは後退します。この状態では、高さが 100vh の要素がビューポート全体を覆います。
この問題を解決するために、ビューポートのさまざまな状態が CSS ワーキング グループで規定されています。
- 大きなビューポート: 動的に展開および撤回される UA インターフェースを想定したビューポートのサイズです。
- 小さいビューポート: 拡張するために動的に拡張 / 後退する UA インターフェースを想定したビューポートのサイズです。
新しいビューポートにも単位が割り当てられています。
- 大きなビューポートを表す単位には、
lvという接頭辞が付いています。単位はlvw、lvh、lvi、lvb、lvmin、lvmaxです。 - 小さいビューポートを表す単位には、
svという接頭辞が付いています。単位はsvw、svh、svi、svb、svmin、svmaxです。
これらのビューポートの割合のユニットのサイズは、ビューポート自体のサイズを変更しない限り固定されます（したがって安定しています）。
1 つは 100svh のサイズの要素、もう 1 つは 100lvh のサイズの要素。
大小のビューポートに加えて、UA の UI を動的に考慮する動的なビューポートもあります。
- 動的ツールバーが開かれると、動的ビューポートは小さいビューポートのサイズと等しくなります。
- 動的ツールバーを閉じた場合、その動的ビューポートは大きいビューポートのサイズと同じになります。
付属のユニットには dv の接頭辞（dvw、dvh、dvi、dvb、dvmin、dvmax）が付いています。それらのサイズは、対応する lv* と sv* の間で固定されます。
これらのユニットは Chrome 108 で出荷され、Safari と Firefox に加えてすでにサポートされています。
対応ブラウザ
- 108
- 108
- 101
- 15.4
注意点
ビューポート単位については、次の点に注意してください。
いずれのビューポート ユニットも、スクロールバーのサイズは考慮されません。そのため、クラシック スクロールバーが有効になっているシステムでは、
100vwのサイズに設定された要素の幅がやや広すぎます。これは仕様に即したものです。動的ビューポートの値は 60 fps では更新されません。すべてのブラウザで、UA UI の展開や格納に伴って更新が抑制されます。一部のブラウザでは、使用する操作（ゆっくりとしたスクロールとスワイプ）によって更新が完全に遅れることもあります。
画面キーボード（仮想キーボード）は UA UI の一部とは見なされません。そのため、ビューポート ユニットのサイズには影響しません。Chrome では、仮想キーボードの有無がビューポートの単位に影響する動作にオプトインできます。
参考情報
ビューポートとこれらのユニットについて詳しくは、HTTP 203 のこちらのエピソードをご覧ください。その中で、Bramus は Jake にさまざまなビューポートと、これらのユニットのサイズが正確に決まる仕組みを説明しています。
その他の参考資料: