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

概要

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

対応ブラウザ

基本構文

.hero {
  /* UIバー表示時でもビューポート全体を覆う */
  min-height: 100svh;
}

.full-screen {
  /* 動的にビューポートサイズに追従 */
  height: 100dvh;
}

.sticky-footer {
  /* UIバーが隠れた状態の最大値を基準 */
  min-height: 100lvh;
}

実務での使いどころ

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

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

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — Viewport units
• Can I use — Small/Large/Dynamic viewport units