11 月の Chrome 108 のリリースで、オンスクリーン キーボード(OSK)が表示されたときのレイアウト ビューポートの動作が変更されます。この変更により、Android 版 Chrome ではレイアウト ビューポートのサイズ変更がなくなり、代わりにビジュアル ビューポートのみのサイズ変更が行われます。これにより、Android 版 Chrome の動作が iOS 版 Chrome や iOS 版 Safari と同等になります。
以下では、今回の変更の背景、Chrome がこの変更を行う理由、準備に役立つ対応方法について説明します。
レイアウト ビューポートとビジュアル ビューポート
ウェブサイトにアクセスしたときに、ページのコンテンツが読み込まれた後もページ全体が表示されない。代わりに、ブラウザはビューポートを提供します。これにより、ページの一部を表示できます。このビューポートは、レイアウト ビューポートとも呼ばれます。ページのコンテンツが大きすぎる場合、ブラウザはスクロール メカニズムを提供します。

position: fixed
を使用して要素を配置すると、そのレイアウト ビューポートに対してレイアウトされます。ページを下にスクロールしてもレイアウト ビューポートは移動しないため、position: fixed
を使用する要素も移動しません。

position: fixed
(青いボックス)を使用してレイアウトされた 2 つの要素があります。左から右に、iPhone 版 Safari、Android 版 Chrome、Android 版 Firefox を示しています。
このレイアウト ビューポートに加えて、ブラウザにはビジュアル ビューポートもあります。これは、現在表示されているビューポートの部分を表します。ズームレベル 1 では、このビジュアル ビューポートはレイアウト ビューポートと同じ大きさになります。

ピンチ操作でズームインすると、レイアウト ビューポートに応じてビジュアル ビューポートのサイズが縮小されます。

ビューポートのサイズ変更動作
入力やその他の編集可能な領域にフォーカスを合わせると、デバイス(主にタッチスクリーン デバイス)に画面キーボードが表示されることがあります。このキーボードは、多くの場合仮想キーボードと呼ばれ、ユーザーが編集可能な領域にコンテンツを入力できるようにします。
ブラウザは、さまざまなビューポートに応じて、次のいずれかの方法で応答します。
- ビジュアル ビューポートのみのサイズを変更し、レイアウト ビューポートをオフセットします。
- ビジュアル ビューポートとレイアウト ビューポートの両方のサイズを変更します。
- レイアウト ビューポートとビジュアル ビューポートのどちらもサイズ変更せず、両方の上に仮想キーボードをオーバーレイします。
これらの 3 つの動作は、次のように視覚化されます。

訪問者が使用しているブラウザと OS の組み合わせに応じて、いずれかの動作が使用されます。これは管理者が制御することはできません。
さまざまなサイズ変更動作のマッピング
Interop 2022 の一環として行われたビューポートの調査では、主要なブラウザと OS の組み合わせごとに、ビューポートに関連するさまざまな側面が調査されました。
テスト対象の項目の 1 つは、OSK が表示されたときのサイズ変更動作です。これにより、次のような分類ができました。
グループ 1
ビジュアル ビューポートのサイズを変更し、レイアウト ビューポートは変更しないブラウザ。
- iOS 版 Safari
- iPadOS 版 Safari
- ChromeOS 版 Chrome
- iOS(Chrome)
- iPadOS 版 Chrome
- iOS 版 Edge
- iPadOS 版 Edge
グループ 2
ビジュアル ビューポートとレイアウト ビューポートの両方のサイズを変更するブラウザ。
- Chrome(Android)
- Android 版 Firefox
- Android 版 Edge
- iOS 版 Firefox
グループ 3
どのビューポートもサイズ変更しないブラウザ:
- デフォルトではなし - Android 版 Chrome では、VirtualKeyboard API を使用してこの動作を有効にできます。
各動作の副作用
OSK が表示されたときにさまざまなビューポートのサイズが変更される仕組みの違いにより、ウェブサイトの互換性のないレイアウトとサイズ設定の動作が発生します。
グループ 1 のブラウザで、OSK が表示されている場合:
- ビューポート相対単位の計算値は変わりません。
- 視覚的なスペース全体を占有するように設計された要素は、サイズを維持します。
position: fixed
を使用する要素はそのまま残り、OSK によって隠される可能性があります。
グループ 2 のブラウザで、OSK が表示されている場合:
- ビューポート相対単位の計算値が縮小されます。
- 視覚的なスペース全体を占有するように設計された要素が縮小されます。
position: fixed
を使用する要素は、レイアウト内の別の場所に配置される可能性があります。

position: fixed
を使用する要素の位置が異なることに注目してください。(青いボックス)左は iOS 版 Safari、中央と右は Android 版 Chrome です。
User-Agent スニッフィングや大規模なスクリプトに頼らない限り、どの動作が使用されているかを知ることはできません。また、この動作は、ユーザーがアクセスしているブラウザと OS の組み合わせによって決まるため、変更することもできません。
Chrome 108 のデフォルト動作の変更
Chrome 108 以降、Android 版 Chrome ではビューポートのサイズ変更動作が調整され、画面キーボードが表示されたときにレイアウト ビューポートのサイズ変更が行われなくなります。
これにより、Android 版 Chrome の動作が、iOS、iPadOS、Windows、ChromeOS 版 Chrome、iOS と iPadOS 版 Safari、iOS、iPadOS、Windows 版 Edge の動作と一致するようになります。
この変更により、Chrome がどの OS で実行されているかにかかわらず、どの動作が使用されるかを作成者は把握できるようになります。さらに、ビューポート相対の安定した単位を使用できます。OSK の表示や非表示がこれらの単位に影響することはありません。
別の動作を有効にする
ウェブサイトで 108 より前のサイズ変更動作を使用したい場合は、ご安心ください。Chrome 108 では、ビューポート メタタグの拡張機能もリリースされます。
interactive-widget
キーを使用して、希望するサイズ変更動作を Chrome に指示できます。
interactive-widget
に指定できる値は次のとおりです。
resizes-visual
: ビジュアル ビューポートのみをサイズ変更し、レイアウト ビューポートはサイズ変更しません。resizes-content
: ビジュアル ビューポートとレイアウト ビューポートの両方のサイズを変更します。overlays-content
: ビューポートのサイズを変更しない。
「古い」Chrome for Android の動作に戻すには、ビューポート メタタグを次のように設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
ビューポート メタタグに interactive-widget
を含めない場合、Chrome はデフォルトの動作(resizes-visual
)を使用します。
設定を視覚化すると、さまざまなビューポートに次のような効果があります。

resizes-visual
、resizes-content
、overlays-content
。各値の効果は、こちらのデモウェブサイトでブラウザで試すことができます。
テストとフィードバック
既存のサイトと若干の違いが生じる可能性がありますが、Android 版 Chrome 108 は iOS 版 Safari と同様に動作するため、ブロックが発生することはないと想定されます。したがって、iOS 版 Safari で正常に動作するウェブサイトは、Android 版 Chrome 108 でも正常に動作するはずです。
ただし、ウェブサイトの作成者は、2022 年 10 月 27 日よりベータ版となる Chrome 108 でウェブサイトを積極的にテストすることをおすすめします。特に、position: fixed
を使用する要素や、ビューポート相対単位に依存する要素に注意してください。
フィードバックは crbug.com で報告できます。報告のタイトルには「オンスクリーン キーボード」を含めてください。