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
ビジュアル ビューポートのサイズを変更し、レイアウト ビューポートをそのままにするブラウザ。
- Safari（iOS）
- 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 の表示時にさまざまなビューポートのサイズが変更される方法に違いがあるため、ウェブサイトのレイアウトやサイズ設定の動作は相互運用性がありません。
OSK が表示されたグループ 1 のブラウザでは次のようになります。
- ビューポート相対単位の計算値は変わりません。
- 視覚的スペース全体を占めるように設計された要素のサイズは変わりません。
position: fixedを使用する要素はそのまま残るため、OSK によって隠される可能性があります。
OSK が表示されたグループ 2 のブラウザでは次のようになります。
- ビューポート相対単位の計算値は縮小されます。
- 表示スペース全体を占めるように設計された要素が縮小します。
position: fixedを使用する要素は、レイアウト内の別の場所に表示される可能性があります。
position: fixed（青いボックス）を使用する要素の位置が異なっていることに注意してください。iOS 版 Safari（左）と Android 版 Chrome（中央と右）の画像。
User-Agent スニッフィングを利用するか、大量のスクリプトを作成しない限り、どの動作が使用されるかはわかりません。また、動作は、ユーザーがアクセスしているブラウザと OS の組み合わせによって決まるため、変更できません。
デフォルトの動作を変更する（Chrome 108）
Chrome 108 以降、Android 版 Chrome でビューポートのサイズ変更動作が調整され、画面キーボードが表示されたときにレイアウト ビューポートのサイズが変更されなくなります。
これにより、Android 版 Chrome の動作が、iOS、iPadOS、Windows、CrOS、iOS と iPadOS の Safari、iOS、iPadOS、Windows の Edge の動作に合わせられます。
この変更により、Chrome が実行されている OS に関係なく、どの動作が使用されるかを確認できるようになりました。さらに、安定したビューポート相対単位が可能になります。OSK の表示と非表示を切り替えても、これらの単位には影響しません。
別の動作のオプトイン
108 より前のサイズ変更動作をウェブサイトで使用したい場合は、心配する必要はありません。また、Chrome 108 は viewport メタタグの拡張機能でリリースされます。
interactive-widget キーを使用して、希望するサイズ変更動作を Chrome に指定できます。
interactive-widget に指定できる値は次のとおりです。
resizes-visual: ビジュアル ビューポートのみのサイズを変更し、レイアウト ビューポートはサイズ変更しません。resizes-content: ビジュアル ビューポートとレイアウト ビューポートの両方のサイズを変更します。overlays-content: ビューポートのサイズを変更しません。
Android 版 Chrome の「旧」動作に再びオプトインするには、ビューポート メタタグを次のように設定します。
<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 からお送りください。レポートのタイトルに必ず「画面キーボード」を含めてください。