CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。

このバーチャルキーボード表示時に頭を悩ませていた人に朗報です。CSSのinteractive-widgetキーワードを使用すると、この問題がすっきり解決します。

Control the Viewport Resize Behavior on mobile with interactive-widget
by Bramus!

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• デフォルトのビューポートのサイズ変更動作
• metaタグのinteractive-widgetキーワード
• バーチャルキーボードに対応したmetaタグの記述方法

はじめに

スマホのビューポート単位は、長い間デベロッパーの頭を悩ませてきました。100vhを使用することは、当初期待していていたものとは正確には異なります。

この問題を解決するためにCSSワーキンググループは、より多くの単位を使用できるように考案しました。その中でも特に動的ビューポート単位（dynamic viewport units）にはsvhとlvhがあり、それぞれ小さいビューポートの高さと大きいビューポートの高さの1%を表す便利な単位です。

左: 100vh、右: 100lvh
ブルーの破線は、レイアウトビューポートです。

これらの単位は2024年現在、相互運用性がありますが（主にWebビューに関する相互運用性の問題がまだあります）、多くの人が抱えている大きな不満が一つあります。それはバーチャルキーボードが表示されたときに、これらの単位がそのバーチャルキーボードの存在を考慮しないことです。プロジェクトによっては、バーチャールキーボードが表示されたときにこれらの単位をサイズ変更したい場合があります。

svhとlvhについて詳しくは、下記をご覧ください。

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

デフォルトのビューポートのサイズ変更動作

バーチャルキーボードはスマホで表示されると、コンテンツの上に重ねて表示されます。その結果、ビジュアルビューポートはサイズ変更されますが、レイアウトビューポート（固定要素を配置するためのビューポート）は変更されません。

スマホでバーチャルキーボードを表示した状態
100svhと100lvhの要素は、バーチャルキーボードの存在に影響を受けない。

レイアウトビューポートは変更されないため、ビューポート単位も変更されません。変更されるのは、スクリーンに表示される視覚的な部分のみを表すビジュアルビューポートのサイズのみです。

注: Chorme 108以前のAndroid版Chromeでは、バーチャルキーボードが表示されるとレイアウトビューポートのサイズが変更されていました。しかし、モバイルSafariに合わせてChromeは動作を調整し、代わりにビジュアルビューポートのサイズのみが変更されるようになりました。FirefoxもFirefox 132のリリースで同じように動作するようになりました。

また、フォーカスされた入力をスクリーンの中央に保つために、ブラウザがレイアウトビューポートを上方（または見方によっては下方）に移動させることもあります。

バーチャルキーボードが表示されているページのビジュアルビューポートの視覚化（オレンジの破線）。
右のレイアウトビューポート（ブルーの破線）はフォーカスされた入力が中央になるように移動されています。

ここで知っておくべき重要なことは、初期包括ブロック（ICB）のサイズはレイアウトビューポート（スモールレイアウトビューポート）に基づいており、ビューポート単位はICBのサイズに基づいているということです。

ICB（レッドの破線）の視覚化。
サイズは、スモールレイアウトビューポートから取得されます。

metaタグのinteractive-widgetキーワード

ビューポートのサイズと形状をコントロールするには、ビューポートのmetaタグを使用します。おそらく、下記のmetaタグを使用したことがあるでしょう。

contentには2つのプロパティがあり、それぞれに値が設定されています。

• width: ICBの幅のサイズを設定、device-widthはデバイスの幅に応じてサイズが決まることを示します。
• initial-scale: ページが最初に読み込まれたときのズームレベルを設定、デフォルトの1が設定されます。

ビューポートのmetaタグで使用する新しいキーワードは、interactive-widgetです。これを使用すると、バーチャルキーボードなどのインタラクティブウィジェットが表示されたときにビューポートがどのように動作するかを設定できます。

• resizes-visual: ビジュアルビューポートのみをサイズ変更し、レイアウトビューポートのサイズ変更はしません。
• resizes-content: ビジュアルビューポートとレイアウトビューポートの両方をサイズ変更します。
• overlays-content: どのビューポートもサイズ変更しません。これはoverlaysContentをtrueに設定してVirtual Keyboard APIを使用するのと似ています。

それぞれの値がどのように異なるかは、下記をご覧ください。
resizes-contentを設定すると、高さいっぱいになります。

オレンジはビジュアルビューポート、ブルーはレイアウトビューポートです。interactive-widgetの値に応じてサイズが異なります。

interactive-widgetにresizes-contentを設定すると、レイアウトビューポートをサイズ変更できます。その結果、ICBもサイズ変更され、ビューポート単位も異なる値になります。

interactive-widgetにresizes-contentを設定した場合の影響を視覚化。
バーチャルキーボードが表示されると、ICBがサイズ変更され、ビューポート単位が調整されます。

バーチャルキーボードに対応したmetaタグの記述方法

バーチャルキーボードが表示されたときのビューポートのサイズ変更をコントロールするには、ビューポートのmetaタグのinteractive-widgetキーワードを使用します。デフォルトでは、ビジュアルビューポートはサイズ変更されます。レイアウトビューポートもサイズ変更するには、interactive-widgetの値をresizes-contentに設定します。

これらのビューポートをサイズ変更しない場合は、interactive-widgetの値をoverlays-contentに設定します。interactive-widgetは、Chrome 108+, Firefox 132+でサポートされています。