公開日: 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 ネイティブの上部ステータスバーと下部の Android ネイティブ ナビゲーション バーは固定されたままです。
ここでは、Chrome のアドレスバーが格納されたり展開されたりするのに合わせて、レイアウト ビューポートのサイズが変化します。
エッジ ツー エッジでの Chrome の動作
Chrome 135 以降では、ビューポートをジェスチャー ナビゲーション バーの領域まで拡張することで、デバイスの下端までウェブ コンテンツを描画できます。
「あご」のあるダイナミック エッジ ツー エッジ
デフォルトでは、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, viewpo>rt-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（必要に応じて「デバッグを有効にする」に設定すると、顎の半分がピンク色になり、他の UI との区別がより明確になります）DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor（「有効」に設定せず、「有効なディスパッチ yOffset」に設定）DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint（[有効] に設定せず、[スクロール可能なバリエーションを有効にする] に設定）
次のフラグが有効になっていないことを確認します。
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Chrome を2 回再起動します。
フィードバックをお寄せください
Chrome とそのエッジ ツー エッジの実装についてフィードバックがある場合は、「UI > Browser > Mobile > EdgeToEdge」コンポーネントで Chromium のバグを報告してください。皆様からのフィードバックをお待ちしております。