Widely available 安心して使用可能。主要ブラウザで広くサポートされている。

Small/large/dynamic viewport units (svh, lvh, dvh)

svh/svw はUIバーが表示された状態の最小ビューポート、lvh/lvw はUIバーが隠れた状態の最大ビューポート、dvh/dvw はUIバーの表示状態に応じて動的に変化するビューポートサイズ。従来の vh ではモバイルブラウザのアドレスバーによるサイズ変動の問題があったが、これらの単位で意図通りの表示が可能になる。

ユニットモバイル

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.vb
108
108
101
15.4
108
15.4
CSS タイプ
vi

「vi」ユニット
108
108
101
15.4
108
15.4
viewport percentage units dynamic

`dvb`、`dvh`、`dvi`、`dvmax`、`dvmin`、`dvw` 単位
108
108
101
15.4
108
15.4
viewport percentage units large

`lvb`、`lvh`、`lvi`、`lvmax`、`lvmin`、`lvw` 単位
108
108
101
15.4
108
15.4
viewport percentage units small

`svb`、`svh`、`svi`、`svmax`、`svmin`、`svw` 単位
108
108
101
15.4
108
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.hero {
  /* Covers the entire viewport even when the UI bar is displayed */
  min-height: 100svh;
}

.full-screen {
  /* Dynamically adapts to the viewport size */
  height: 100dvh;
}

.sticky-footer {
  /* Based on the maximum value when the UI bar is hidden */
  min-height: 100lvh;
}

ライブデモ

Svh(small-po-t)

Small/large/dynamic viewport units (svh, lvh, dvh) Svh(small-po-t) demo.

プレビュー全画面表示

Dvh(dynamic-po-t)

Small/large/dynamic viewport units (svh, lvh, dvh) Dvh(dynamic-po-t) demo.

プレビュー全画面表示

Lvh(big-po-t)

Small/large/dynamic viewport units (svh, lvh, dvh) Lvh(big-po-t) demo.

プレビュー全画面表示

実務での使いどころ

  • モバイルのフルスクリーンUI

    100svh でアドレスバーが表示されていても確実にビューポート全体を覆うレイアウト。

  • 動的なビューポート追従

    100dvh でスクロールに応じてUIバーが出入りしても、高さが自動調整される。

注意点

  • dvh はUIバーの出入りに伴いリアルタイムで値が変化するため、レイアウトシフトの原因になる場合がある。

アクセシビリティ

  • ビューポート単位でコンテンツの表示範囲が制限される場合、スクロールでアクセスできるよう配慮する。

参考リンク