CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項

Post on:2022年12月8日

はじめに

先日リリースされたChrome 108で、動的なバーがあるスマホのビューポートを考慮したCSSの新しいビューポート単位がサポートされました。SafariとFirefoxではすでにサポートされており、Chrome 108のサポートで3つのブラウザすべてで利用できるようになりました！

CSSではビューポートと同じ幅・高さのサイズを設定するには、vw, vh単位を使用できます。

要素の幅を100vw、高さを100vhにすると、ビューポート全体を覆うことになります。

ブルーの破線: ビューポート
ライトブルーのエリア: 要素の幅を100vw、高さを100vhに設定

vw, vh以外にも、ビューポート単位は使用できます。

これらのビューポート単位は、主要ブラウザすべてにサポートされています。

既存のビューポート単位はデスクトップでは期待通りに機能しますが、スマホでは話が別です。スマホには動的なバーがあり、その有無によってビューポートサイズは影響を受けます。動的なバーとは、アドレスバーやタブバーです。

この動的なバーがあることでビューポートサイズは変化しますが、vwとvhのサイズは変化しません。その結果、高さ100vhの要素は、ビューポートからはみ出してしまいます。これは、動的なバー分増えてしまうということです。

スマホで100vhを設定した場合

下にスクロールすると、この動的なバーは格納されます。この状態になると、高さ100vhの要素はビューポートいっぱいになります。

スマホでの100vhは、UAインターフェースが引っ込んでいるのが「正しい」。

この問題を解決するために、CSS Working Groupではビューポートのさまざまな状態が規定されています。

左: Small viewport、右: Large viewport

新しいビューポートにも単位が割り当てられています。

Large viewportを表す単位にはlvという接頭辞が付きます。
lvw, lvh, lvi, lvb, lvmin, lvmax
Small viewportを表す単位にはsvという接頭辞が付きます。
svw, svh, svi, svb, svmin, svmax

これらの新しいビューポート単位の%のサイズは、ビューポート自体のサイズが変更されないかぎり固定されます（つまり安定しています）。

左: 100svhを設定、右: 100lvhを設定

Large viewportとSmall viewportに加えて、UAインターフェイスを動的に考慮したDynamic viewportもあります。

Dynamic viewportにも単位が割り当てられています。

Dynamic viewportを表す単位にはdvという接頭辞が付きます。
dvw, dvh, dvi, dvb, dvmin, dvmax

100dvhを設定すると、Large viewportまたはSmall viewportのいずれかに適応します。

100dvhを設定、左: 100svhと同じ、右: 100lvhと同じ

これらの新しいビューポート単位はChrome 108でサポートされ、既にサポートされているSafariとFirefoxに加わります。

ビューポート単位について知っておくべきいくつかの注意点があります。

どのビューポート単位もスクロールバーのサイズは考慮されていません。したがって、従来のスクロールバーが有効になっているシステムでは100vwの要素は少し幅が広くなります。これは仕様の通りです。
Dynamic viewportの値は、60fpsでは更新されません。すべてのブラウザでUAインターフェイスが展開あるいは格納されると、更新が抑制されます。一部のブラウザでは使用するジェスチャ（ゆっくりスクロールまたはスワイプ）によって、更新が完全に停止されることがあります。
オンスクリーンキーボード（バーチャルキーボード）は、UAインターフェイスの一部とは見なされません。したがって、ビューポート単位のサイズには影響しません。Chromeではオンスクリーンキーボードの存在がビューポート単位に影響を与える動作にオプトインすることができます。
参考記事: Chrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります