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

先日リリースされたChrome 108で、CSSの新しいビューポート単位(svh, lvh, dvhなど)がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。

この新しいビューポート単位の基本的な使い方と注意事項を紹介します。

CSSの新しいビューポート単位が便利! スマホで100vhが高さいっぱいにならない問題はこれで解決

The large, small, and dynamic viewport units
by Bramus

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。

はじめに

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

サイトのキャプチャ

新しいビューポート単位のサポートブラウザ

おさらい: ビューポートとその単位

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

  • vw: ビューポートサイズの幅の1%
  • vh: ビューポートサイズの高さの1%

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

ビューポート全体を覆う設定

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

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

  • vi: ビューポートのインライン軸のサイズの1%
  • vb: ビューポートのブロック軸のサイズの1%
  • vmin: vwあるいはvhの小さい値
  • vmax: vwあるいはvhの大きい値

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

サイトのキャプチャ

ビューポート単位のサポートブラウザ

新しいビューポート単位の必要性

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

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

スマホではビューポートからはみ出てしまう

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

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

下にスクロールした場合

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

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

  • Large viewport: UAインターフェイスが動的に展開され、格納されることを想定してサイズ設定されたビューポート
  • Small viewport: UAインターフェイスが動的に展開・格納され、展開されることを想定してサイズ設定されたビューポート
左: Small viewport、右: Large viewport

左: Small viewport、右: Large viewport

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

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

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

100svhと100lvhを設定した場合

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

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

  • 動的バーが展開されると、Dynamic viewportはSmall viewportのサイズと同じになります。
  • 動的バーが格納されると、Dynamic viewportはLarge viewportのサイズと同じになります。

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

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

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

100dvhを設定した場合

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

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

サイトのキャプチャ

新しいビューポート単位のサポートブラウザ

注意事項

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

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

リソース

新しいビューポート単位について、さらに知りたい人は以下をご覧ください。

sponsors

top of page

©2024 coliss