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 の組み合わせごとに、ビューポートに関連するさまざまな側面が調査されました。
テスト済みのアスペクトの一つは、OSK が表示されたときのサイズ変更の動作です。これにより、次のような分類ができました。
グループ 1
ビジュアル ビューポートのサイズを変更し、レイアウト ビューポートは変更しないブラウザ。
- Safari（iOS）
- iPadOS 版 Safari
- ChromeOS 上の Chrome
- iOS（Chrome）
- iPadOS 版 Chrome
- iOS 版 Edge
- iPadOS 上の Edge
グループ 2
ビジュアル ビューポートとレイアウト ビューポートの両方のサイズを変更するブラウザ。
- Chrome（Android）
- Firefox（Android）
- Android 版 Edge
- iOS 版 Firefox
グループ 3
ビューポートのサイズを調整しないブラウザ:
- デフォルトではなし - Android 版 Chrome では、VirtualKeyboard API を使用してこの動作を有効にできます。
各動作の副作用
OSK が表示されたときにさまざまなビューポートのサイズが変更される仕組みが異なるため、ウェブサイトのレイアウトとサイズの動作が相互運用できなくなります。
グループ 1 のブラウザで、OSK が表示されている場合:
- ビューポート相対単位の計算値は変わりません。
- 可視領域全体を占有するように設計された要素は、サイズを維持します。
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、ChromeOS 版 Chrome、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: ビューポートのサイズを変更しません。
「古い」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 で報告できます。報告のタイトルには「オンスクリーン キーボード」を含めてください。