100vhが嘘をつくとき:モバイルビューポート問題の解決法

フルハイトのヒーローセクションを構築します。Chrome DevToolsでは完璧に見えます。しかし、スマートフォンで開くと下部のコンテンツが切れています — 配置に時間をかけたCTAボタンがブラウザのアドレスバーの裏に隠れています。聞き覚えがありませんか?

これはもはやSafariだけの癖ではありません。ビューポート単位が基本的にどのように定義されているかの結果であり、モバイルのChrome、Firefox、Samsung Internetにも影響します。

なぜモバイルで100vhが嘘をつくのか

根本原因は、2つの異なるビューポート概念に起因します:

• レイアウトビューポート: ブラウザがvhを含むCSSの長さを計算するために使用するもの
• ビジュアルビューポート: ユーザーが実際に画面上で見るもの

モバイルブラウザは、スクロール中にアドレスバーとナビゲーションツールバーが格納されても、意図的にレイアウトビューポートを固定したままにします。これは、100vhが展開されたツールバー状態 — ラージビューポート — に対して計算され、その値はページが最初に読み込まれたときの可視画面よりも大きくなることを意味します。

これはバグではありません。 CSS仕様ではvhをlvh(ラージビューポート高さ)と同等と定義しています。ブラウザは正しく動作しています。あなたのレイアウトがそれを考慮していないだけです。

これがDevToolsのモバイルエミュレーションが正常に見える理由です:動的なブラウザUIをシミュレートしていません。シミュレーターではアドレスバーは決して格納されません。

実際の影響

• ヒーローセクションが初期読み込み時に56〜80pxオーバーフローする
• 固定フッターがナビゲーションバーに隠される
• フルスクリーンモーダルの下部でコンテンツが切れる
• (dvhを使用している場合)スクロール中にツールバーが格納されるとレイアウトがジャンプする

モダンな解決策: svh、dvh、lvh

CSSは現在、異なるツールバー状態に対応する3つの明示的なビューポート高さ単位を提供しています:

ほとんどのフルハイトセクションには: svhを使用

.hero {
  height: 100vh;     /* 古いブラウザ用のフォールバック */
  height: 100svh;    /* 読み込み時に可視画面内に収まる */
}

100svhは要素を最小の可能なビューポートにサイズ調整します — つまり、ツールバーが完全に表示されているときでも収まります。オーバーフローなし、クリッピングなし。

動的な調整が必要な場合: dvhを慎重に使用

.full-height {
  height: 100vh;     /* フォールバック */
  height: 100dvh;    /* ツールバーの格納に応じてリサイズ */
}

警告: dvhはスクロール中にブラウザUIが変化すると再計算されます。これにより、目に見えるレイアウトシフトと再描画が発生する可能性があります。ほとんどのヒーローセクションやモーダルには適切なデフォルトではありません — ツールバーの状態に応じて要素を明示的にリサイズしたい場合にのみ使用してください。

ブラウザサポート

svh、dvh、lvhはChrome 108+、Safari 15.4+、Firefox 101+でサポートされています。合わせて世界中のユーザーの90%以上をカバーしています。古いブラウザについては、100vhのフォールバックが残りを処理します。

知っておくべきエッジケース

セーフエリアインセット: エッジ・トゥ・エッジディスプレイ(iPhoneのノッチ/Dynamic Island)では、ビューポート単位とenv(safe-area-inset-bottom)を組み合わせて、コンテンツがシステムUIの裏に配置されるのを避けます:

.hero {
  height: 100svh;
  padding-bottom: env(safe-area-inset-bottom);
}

オンスクリーンキーボード: 仮想キーボードは主にビジュアルビューポートに影響し、レイアウトビューポートのサイズ設定との相互作用はブラウザやWebViewによって異なる場合があります。これはツールバー駆動のビューポート単位とは別のものであり、JavaScriptの処理やVirtualKeyboard APIをプログレッシブエンハンスメントとして必要とする場合があります。

WebViewと組み込みブラウザ: アプリ内ブラウザ(Instagram、LinkedIn)は、しばしば非標準のビューポート動作をします。システムブラウザだけでなく、実際のデバイスでテストしてください。

まとめ

モバイルのフルハイトレイアウトのデフォルトとして100vhに手を伸ばすのをやめましょう。読み込み時に可視画面に収まる必要がある安定したセクションには100svhを使用してください。動的なリサイズが意図的である場合にのみ100dvhを使用してください。新しいビューポート単位ファミリーが存在するのは、まさに古い動作が常に妥協であったためです — 今、あなたが実際に望むものについて明示的になるためのツールがあります。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..