公開日: 2025 年 2 月 28 日
エッジ ツー エッジは、Android システムバーの背後に描画することで、アプリがディスプレイの幅と高さ全体に広がるようにする Android の機能です。
Chrome 135 より前は、Android 版 Chrome はエッジ ツー エッジで描画されませんでした。このガイドでは、この変更がウェブサイトに与える影響と、デベロッパーがこの変更に対応するためにできることについて説明します。
あらゆる場所のバー
Android には、オペレーティング システム自体が提供するシステムバーが付属しています。
ステータスバー、キャプション バー、ナビゲーション バーをまとめてシステムバーと呼びます。バッテリー残量、時刻、通知アラートなどの重要な情報を表示し、どこからでもデバイスを直接操作できます。
画面の上部には、通知アイコンとシステム アイコンを含むステータスバーがあります。
画面の下部にはナビゲーション バーがあり、戻る、ホーム、概要のコントロールを使用してナビゲーションを操作できます。これには、従来の 3 ボタン ナビゲーションや最新のジェスチャー ナビゲーション バーがあります。
Android のシステムバーに加えて、Chrome 自体にもアドレスバーがあり、スクロールすると動的に拡大、縮小します。
Chrome がエッジ ツー エッジに
ウェブサイトにアクセスすると、そのウェブサイトは（レイアウト）ビューポートと呼ばれる長方形に表示されます。
Android 版 Chrome では、Chrome 135 より前は、このレイアウト ビューポートは上部のステータスバーと下部のジェスチャー ナビゲーション バーの間に描画されていました。Chrome のアドレスバーの有無はビューポートのサイズに影響する可能性がありますが、ビューポートが上部のシステムバーや下部のジェスチャー ナビゲーション バーに拡大されることはありません。
Chrome 135 以降、ビューポートを Android のジェスチャー ナビゲーション バーまで拡張できるようになります。これは、エッジ ツー エッジと呼ばれる動作です。
エッジ ツー エッジを使用しない Chrome の動作
次の動画は、エッジ ツー エッジをサポートしていない Android 版 Chrome を示しています。ページをスクロールすると、Chrome のアドレスバー（上部）が動的に非表示になります。ただし、Android ネイティブの上部ステータスバーと下部ナビゲーション バーは固定されたままです。
ここでは、Chrome のアドレスバーが縮小または拡大すると、レイアウト ビューポートのサイズが変化します。
エッジ ツー エッジでの Chrome の動作
Chrome 135 以降、Chrome では、ビューポートをジェスチャー ナビゲーション バーの領域まで拡張することで、デバイスの下端までウェブ コンテンツを描画できるようになります。
「チン」を使用した動的なエッジ ツー エッジ
デフォルトでは、Chrome のエッジ ツー エッジは、ジェスチャー ナビゲーション バー領域に「チン」と呼ばれる新しい動的なボトムバーを表示します。Chrome のアドレスバーと同様に、このチンはスクロールを開始すると非表示になり、ビューポートのサイズに影響します。
以下の Android 版 Chrome の録画では、エッジ ツー エッジがサポートされており、ページを下にスクロールすると、Chrome のアドレスバーとチンが動的に引っ込みます。これにより、ビューポートが拡張され、ウェブ コンテンツをデバイスの下端まで描画できるようになります。
このチン動作は、Chrome 135 以降の Chrome の新しいデフォルト動作です。
オプトインでデフォルトでエッジ ツー エッジにする
エッジ ツー エッジ用に構築されたウェブサイトは、viewport メタタグを調整することで、そのことを示すことができます。有効にすると、デフォルトでビューポートが下端まで拡張され、チンは表示されなくなります。
ページは、viewport メタタグとその viewport-fit キーを使用して、エッジ ツー エッジをサポートしていることを示すことができます。
エッジ ツー エッジを有効にするには、viewport-fit を cover の値に設定します。
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
viewport-fit のさまざまな値について詳しくは、MDN をご覧ください。
ジェスチャー ナビゲーション バーによって遮られる可能性があるコンテンツへの対処
エッジ ツー エッジモードでは、ジェスチャー ナビゲーション バーによって遮られる可能性のあるコンテンツを考慮する必要があります。
ほとんどの場合、下部のあごは自動的に移動するため、何もする必要はありません。ユーザーは、以前と同様にウェブサイトのすべてのコンテンツにアクセスできます。
ただし、デフォルトでエッジ ツー エッジにオプトインする場合や、ビューポートの下部に配置されている要素がある場合は、そのコンテンツが覆われる可能性があることを考慮する必要があります。
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
チンが存在する場合、コンテンツは最初はユーザーがアクセスできますが、チンが消えると Android のナビゲーション バーによって遮られます。
この問題を軽減するには、セーフエリア インセットを使用して、影響を受ける要素を Android ネイティブの下部ジェスチャー ナビゲーション バーの上に常に配置するか、背景をその領域に拡張します。
セーフエリアのインセット
セーフエリア インセットは、ビューポートの端からの上、右、下、左のインセットによって長方形を定義する 4 つの環境変数です。
これら 4 つの値を組み合わせることで、セーフエリアの長方形が形成されます。この領域にコンテンツを配置すれば、Android のジェスチャー ナビゲーション バーなどによってコンテンツが遮られることはありません。
セーフエリアの下部インセットを使用する
ビューポートの下部に配置される要素については、bottom プロパティの値として safe-area-inset-bottom を使用して、ジェスチャー ナビゲーション バーの下に配置されないようにします。safe-area-inset-bottom から返される値は、チンが移動するにつれて動的に更新されます。その結果、下部に配置された要素は Android のジェスチャー ナビゲーション バーの上に適切に配置されます。
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom プロパティで下部のセーフエリア インセットを使用する、下部に配置された要素を含むウェブサイトの図。チンが表示されている場合、バーは Android のジェスチャー ナビゲーション バーの上に表示されます。チンが消えると、要素もその上に配置されます。図からわかるように、結果はまだ完璧ではありません。チンが移動すると、残りのページ コンテンツがジェスチャー ナビゲーション バーの領域に表示されます。これは、この状態ではビューポートがジェスチャー ナビゲーション バーの領域まで拡張されるためです。
下部に固定されたコンテンツの下にコンテンツが描画されないようにするには、padding-bottom を safe-area-inset-bottom に設定するのが一般的な方法です。これにより、チンが非表示になると、下部に固定された要素が自動的に拡大します。この方法は機能しますが、チンが移動する際にレイアウト スラッシングが発生するため、おすすめしません。
padding を safe-area-inset 値に設定しないでください。
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
セーフエリアの下部インセットとセーフエリアの下部最大インセットを使用する
代わりに、safe-area-inset-bottom と safe-area-max-inset-bottom を組み合わせて使用することをおすすめします。チンが邪魔にならないように移動するにつれて動的に更新される動的 safe-area-inset-bottom とは異なり、safe-area-max-inset-bottom は safe-area-inset-bottom の最大値を表します。
この safe-area-max-inset-bottom を使用して、下部に固定された要素を事前に拡大し、safe-area-inset-bottom と組み合わせて要素を下に引き、あごの後ろに配置します。
safe-area-max-inset-bottom を safe-area-inset-bottom と組み合わせて使用する
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
視覚的な結果は padding-bottom: env(safe-area-inset-bottom, 0px); のアプローチと同じですが、パフォーマンスは大幅に向上します。あごが離れるにつれて bottom の計算値のみを変更する必要があるため、レイアウト スラッシングは発生しません。
Chrome 135 のリリース前にエッジ ツー エッジを試す
一般公開の安定版リリース前にエッジ ツー エッジを試すには、chrome://flags でいくつかの Chrome フィーチャー トグルを有効にする必要があります。
EdgeToEdgeBottomChin（必要に応じて [Enabled Debug] に設定すると、チンエリアの半分がピンク色になり、他の UI と明確に区別できるようになります）DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor（[有効] ではなく [有効なディスパッチ yOffset] に設定します）DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint（[有効] ではなく [スクロール可能なバリエーションを有効にする] に設定）
次のフラグが有効になっていないことを確認します。
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Chrome を 2 回再起動します。
フィードバックをお寄せください
Chrome とそのエッジ ツー エッジの実装についてフィードバックがある場合は、「UI > Browser > Mobile > EdgeToEdge」コンポーネントで Chromium のバグを報告してください。皆様からのフィードバックをお待ちしております。