Android 版 Chrome のエッジツーエッジ移行ガイド

Bramus

公開日: 2025 年 2 月 28 日

エッジ ツー エッジは、Android システムバーの背後に描画することで、アプリをディスプレイの幅と高さ全体に広げることができるAndroid の機能です。

Chrome 135 より前は、Android 版 Chrome は端から端まで描画していませんでした。このガイドでは、この変更がウェブサイトに与える影響と、デベロッパーがこの変更に対応するためにできることについて説明します。

注: Chrome 135 の変更は、小画面デバイスを対象としています。大画面デバイスで実行されている Android 版 Chrome は現在対象外ですが、今後の Chrome リリースで対応する予定です。

注: この機能は Chrome のバリエーションを使用してロールアウトされています。そのため、以前のバージョンの Chrome で確認できる場合があります。

バー

Android には、オペレーティング システム自体が提供するシステムバーが付属しています。

ステータスバー、キャプション バー、ナビゲーション バーを合わせて「システムバー」と呼びます。バッテリー残量、時刻、通知アラートなどの重要な情報を表示し、どこからでもデバイスを直接操作できます。

画面上部にはステータスバーがあり、通知アイコンとシステム アイコンが表示されます。

Android のステータスバーで [（source）] がハイライト表示されました。

画面の下部にはナビゲーション バーがあります。このバーでは、[戻る]、[ホーム]、[概要] の各コントロールを使用してナビゲーションを操作できます。従来の 3 ボタン ナビゲーションまたは最新のジェスチャー ナビゲーション バーを使用できます。

ジェスチャー ナビゲーション バー（source）。

Android システムバーに加えて、Chrome 自体にもアドレスバーが用意されており、スクロールに応じて動的に拡大、縮小します。

Chrome の狭額縁化

ウェブサイトにアクセスすると、そのウェブサイトは（レイアウト）ビューポートと呼ばれる長方形で表示されます。

Android 版 Chrome では、Chrome 135 より前は、そのレイアウト ビューポートは上部のステータスバーと下部のジェスチャー ナビゲーション バーの間に描画されていました。Chrome のアドレスバーの有無はビューポートのサイズに影響しますが、ビューポートが画面上部のシステムバーや下部のジェスチャー ナビゲーション バーに拡大されることはありません。

Chrome 135 より前の Android 版 Chrome のビューポートの最小サイズと最大サイズ。これらのサイズは、小サイズと大サイズのビューポートと呼ばれます。ビューポート自体には青色の破線の枠線が表示されます。

Chrome 135 以降では、ビューポートを Android のジェスチャー ナビゲーション バーに拡張できるようになりました。これは、エッジ ツー エッジと呼ばれる動作です。

Android 版 Chrome で表示される大きなビューポート（左）と、Chrome で表示される大きなビューポート（右）。左のビューポートは端から端まで表示されていません。エッジツーエッジをサポートする Chrome では、Chrome の動的ツールバーが収納されると、ビューポートがジェスチャー ナビゲーション バー領域に拡張されます。

注: iOS 版 Chrome では、iOS 11.3 のリリースに合わせて、エッジツーエッジのサポートが追加されました。このガイドの推奨事項は、iOS で実行されている Chrome にも適用されます。

エッジ ツー エッジのない Chrome の動作

以下の動画は、エッジツーエッジに対応していない Android 版 Chrome を示しています。ページをスクロールすると、Chrome のアドレスバー（上部）が動的に非表示になります。ただし、Android ネイティブの上部ステータスバーと下部の Android ネイティブ ナビゲーション バーは固定されたままになります。

以前の動作: エッジツーエッジ サポートのない Android 版 Chrome で、https://developer.chrome.com/ が読み込まれている場合。

ここでは、Chrome のアドレスバーが収縮または拡大すると、レイアウト ビューポートのサイズが変更されます。

エッジ ツー エッジでの Chrome の動作

Chrome 135 以降では、ビューポートをジェスチャー ナビゲーション バー領域まで拡張することで、デバイスの下端までウェブ コンテンツを描画できるようになりました。

「あご」を備えたダイナミックなエッジツーエッジ

デフォルトでは、Chrome のエッジツーエッジでは、ジェスチャー ナビゲーション バー領域に「あご」と呼ばれる新しい動的ボトムバーが表示されます。Chrome のアドレスバーと同様に、この部分はスクロールを開始すると移動し、ビューポートのサイズに影響します。

エッジツーエッジ ディスプレイをサポートする Android 版 Chrome の次の動画では、ページを下にスクロールすると、Chrome のアドレスバーと下部ベゼルの両方が動的に収納されます。これによりビューポートが拡大し、デバイスの下端までウェブ コンテンツを描画できるようになります。

新しい動作: エッジツーエッジ サポートが有効で、https://developer.chrome.com/ が読み込まれている Android 版 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 のナビゲーション バーによって遮られます。

「bottom: 0」で下部に配置された要素を含むウェブサイトのイラスト。あごが見える場合、下部に配置された要素は Android のナビゲーション バーの上に配置されます。顎を離すと、要素は Android のナビゲーション バーの背後に配置され、その時点で要素が部分的に隠れます。

これを軽減するには、セーフエリア インセットを使用して、影響を受ける要素を常に Android ネイティブの下部ジェスチャー ナビゲーション バーの上に配置するか、その領域に背景を拡張します。

セーフエリアの切り欠き

Browser Support

• 69
• 79
• 65
• 11

Source

セーフエリアの切り欠きは、ビューポートの端から上、右、下、左の切り欠きによって長方形を定義する 4 つの環境変数です。

これらの 4 つの値を組み合わせて、セーフティ エリアの長方形を形成します。この領域にコンテンツを配置すると、Android ジェスチャー ナビゲーション バーなどの要素によってコンテンツが遮られることがなくなります。

エッジツーエッジ モードの Chrome のイラスト。ビューポートとセーフティ エリアの長方形が黄色で塗られています。下部が収納されているため、セーフエリアの下部インセットにより、セーフエリアの長方形がジェスチャー ナビゲーション バーに達することがなくなります。その結果、そのジェスチャー ナビゲーション バーの下からビューポートが覗き出します。

セーフティ エリアの下端の切り欠きを使用する

ビューポートの下部に配置される要素については、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 をセーフティ エリアの切り欠き値に設定しないでください。

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

重要: パフォーマンスの低下を防ぐため、Chrome ではこのパターンを検出すると、スクロール中に下部をスライドしません。

セーフエリアの下端の差し込みとセーフエリアの下端の最大差し込みを使用する

代わりに、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));
}

ライブデモを試す

注: safe-area-max-inset-bottom の 36px フォールバック値は、safe-area-max-inset-bottom をサポートしていないブラウザに対応するために選択されています。この値は、iOS の Safari のシングルタブ モードで、縦向きの場合の下部オフセットが最大 36px であるため選択されました。

重要: Chrome には、calc(env(safe-area-inset-bottom, …) +/- …); パターンを検出したときにコードを最適化する機能（いわゆる高速パス）が用意されています。この高速パスにより、下部に固定されたコンテンツを、あごが邪魔にならないようにあごと一緒に高速に移動できます。

視覚的な結果は padding-bottom: env(safe-area-inset-bottom, 0px); アプローチと同じですが、パフォーマンスは大幅に向上します。下顎が離れるにつれて変更する必要があるのは bottom の計算値のみであるため、レイアウトのスラッシングは発生しません。

セーフエリアの切り欠きを考慮した、下部アンカー要素のあるウェブサイトのイラスト。顎が見える場合（左）は、要素は顎の上に配置されます。下部が見えない場合、要素が Android のジェスチャー ナビゲーション バーに視覚的に重なります。

注: 最大セーフティ エリアの切り欠き（safe-area-max-inset-bottom など）は Chrome 135 以降で利用できます。

Chrome 135 より前にエッジツーエッジを試す

エッジツーエッジを一般安定版リリース前に試すには、chrome://flags で多くの Chrome 機能フラグを有効にする必要があります。

• EdgeToEdgeBottomChin （必要に応じて [Enabled Debug] に設定すると、あごの半分がピンク色になり、他の UI と明確に区別できます）
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor（[Enabled] ではなく [Enabled Dispatch yOffset] に設定）
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint（[有効] ではなく [有効なスクロール可能なバリエーション] に設定）

次のフラグが有効ではないことを確認します。

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

Chrome を2 回再起動します。

フィードバックをお寄せください

Chrome とそのエッジツーエッジの実装についてフィードバックがある場合は、[UI > Browser > Mobile > EdgeToEdge] コンポーネントで Chromium のバグを報告してください。皆様からのフィードバックをお待ちしております。