長年ウェブ制作者を悩ませてきたモバイルブラウザでの100vh問題が、ついに根本的な解決策を手に入れた。CSSが正式な修正として3つの新しいviewport単位セットを提供し、これまでJavaScriptに頼っていた複雑な回避策が不要になった。
フルスクリーンのヒーローセクションを作り、スマートフォンで開くと下部がブラウザのアドレスバーに隠れるという現象は、100vhが設計上モバイルで「嘘をつく」ことが原因だった。モバイルでは、それが嘘をつくという状況が何年も続いていたが、この状況に終止符が打たれる。
新しい解決策は、3つのviewport状態large（lvh）、small（svh）、dynamic（dvh）という明確な区分けを持つ。それぞれが異なる用途に最適化されている。svh（Small Viewport Height）はブラウザUIが展開された状態でのviewport高さを表し、最小の可視領域となる。lvh（Large Viewport Height）はブラウザUIが折りたたまれた状態での高さで、最大の可視領域を意味する。
最も興味深いのはdvh（Dynamic Viewport Height）だ。真のMVP。この単位はブラウザUIが変化するに従って自動的にスケールする。アドレスバーが縮むと1dvhは大きくなり、展開すると1dvhは小さくなる。ただし、動的な性質ゆえに使用場面を選ぶ必要がある。
ブラウザ対応状況は良好で、Chrome 108+、Edge 108+、Firefox 101+、Safari 15.4+、Opera 94+で完全サポートされている。2026年初頭時点で、世界のユーザーの約95%がこれらの単位をサポートするブラウザを使用している。古いブラウザとの互換性は、CSSカスケードを利用した二段階宣言で解決できる。
実装は驚くほど簡潔だ。ブラウザは理解できないCSS宣言を静かに無視するため、この二行パターンはサポートされているすべての場所で新しい動作を提供し、その他の場所では合理的なフォールバックを提供する。具体的な使い分けは明確で、画面全体を埋めたい場合はlv単位を使用し、保証された可視領域内に常にフィットさせたい場合はsv単位を使用する。
日本の制作現場でも導入しやすい技術革新といえる。従来のJavaScriptによる回避策と異なり、パフォーマンスオーバーヘッドが少なく、メンテナンスも簡単だ。特に中小企業のサイトでよく見かけるシンプルなヒーローセクションから、複雑なモーダルUIまで、幅広い場面で活用できる。それは小さな変更だが、サイトのすべてのモバイル訪問者にとって実際の違いを生む実用的な改善といえるだろう。
