Leitfaden für die Vollbildmigration in Chrome für Android

Bramus

Veröffentlicht am 28. Februar 2025

„Edge-to-Edge“ ist eine Android-Funktion, mit der Anwendungen die gesamte Breite und Höhe des Displays einnehmen können, indem sie hinter den Android-Systemleisten gerendert werden.

Vor Chrome 135 wurde Chrome für Android nicht randlos dargestellt. In diesem Leitfaden wird erläutert, welche Auswirkungen diese Änderung auf Websites hat und was Sie als Entwickler tun können, um sich darauf einzustellen.

Überall verfügbar

Android bietet Systemleisten, die vom Betriebssystem selbst bereitgestellt werden.

Die Statusleiste, die Untertitelzeile und die Navigationsleiste werden zusammen als Systemleisten bezeichnet. Sie zeigen wichtige Informationen wie den Akkustand, die Uhrzeit und Benachrichtigungen an und ermöglichen die direkte Interaktion mit dem Gerät von überall aus.

Oben auf dem Display befindet sich die Statusleiste, die Benachrichtigungs- und Systemsymbole enthält.

Abbildung des oberen Teils eines Android-Geräts, auf dem die Systemleiste hervorgehoben ist.
Die Statusleiste auf Android ist hervorgehoben.(Quelle)

Unten auf dem Display befindet sich die Navigationsleiste, mit der Sie die Navigation über die Steuerelemente „Zurück“, „Startbildschirm“ und „Übersicht“ steuern können. Das kann die klassische Bedienung über drei Buttons oder die moderne Bedienung über Gesten sein.

Abbildung des unteren Teils eines Android-Geräts mit der Bedienung über Gesten.
Die Navigationsleiste für die Bedienung über Gesten (Quelle).

Zusätzlich zu den Android-Systemleisten hat Chrome eine eigene Adressleiste, die sich beim Scrollen dynamisch ein- und ausblendet.

Chrome wird über den gesamten Bildschirm angezeigt

Wenn Sie eine Website aufrufen, wird sie in einem Rechteck dargestellt, das als Layout-Viewport bezeichnet wird.

In Chrome für Android vor Chrome 135 wird dieser Layout-Darstellungsbereich zwischen der oberen Statusleiste und der unteren Bedienung über Gesten gezeichnet. Das Vorhandensein der Adressleiste von Chrome (oder das Fehlen derselben) kann sich auf die Größe des Darstellungsbereichs auswirken. Der Darstellungsbereich wird jedoch nie in die obere Systemleiste oder die untere Leiste für die Bedienung über Gesten erweitert.

Abbildungen eines Android-Geräts mit Chrome für Android, das nicht randlos ist. Die Abbildung links zeigt Chrome mit der maximierten Adressleiste. Zwischen der Adressleiste und der Bedienung über Gesten befindet sich ein grün hervorgehobenes Feld mit einer Höhe von 100 svh. Die Abbildung rechts zeigt Chrome mit der eingezogenen Adressleiste. Zwischen der Statusleiste und der Bedienung über Gesten befindet sich ein grün hervorgehobenes Feld mit einer Größe von 100 lvh. Der Viewport selbst hat eine gestrichelte blaue Umrandung.
Die Mindest- und Maximalgröße des Viewports in Chrome für Android vor Chrome 135. Diese Größen werden als „kleiner“ und „großer“ Darstellungsbereich bezeichnet. Der Viewport selbst hat eine gestrichelte blaue Umrandung.

Ab Chrome 135 darf sich der Darstellungsbereich in die Navigationsleiste für die Bedienung über Gesten von Android erstrecken. Dieses Verhalten wird als Edge-to-Edge bezeichnet.

Abbildungen des Viewports in Chrome unter Android, der nicht bis zum Rand geht (links), und in Chrome unter Android, der bis zum Rand geht (rechts). Jede Visualisierung hat ein blaues Feld, das ein Element mit einer Höhe von 100 vh darstellt. Der Text auf der linken Seite erläutert, was passiert, wenn Chrome nicht randlos ist. Dort steht: „Der Darstellungsbereich bleibt zwischen der oberen Statusleiste und der unteren Bedienung über Gesten eingeklemmt.“ Der Text auf der rechten Seite erläutert, was passiert, wenn Chrome randlos dargestellt wird. Dort steht: „Der Darstellungsbereich erstreckt sich in die Leiste für die Bedienung über Gesten.“
Die große Ansicht in Chrome für Android, die nicht randlos ist (links), und in Chrome, die randlos ist (rechts). In Chrome mit Unterstützung für Edge-to-Edge-Anzeigen erstreckt sich der Darstellungsbereich in den Bereich der Bedienung über Gesten, wenn die dynamischen Symbolleisten von Chrome eingezogen werden.

Chrome-Verhalten ohne Edge‑to‑Edge

In der folgenden Aufnahme ist Chrome für Android ohne Edge-to-Edge-Unterstützung zu sehen. Die Adressleiste von Chrome (oben) wird dynamisch ausgeblendet, wenn auf der Seite gescrollt wird. Die native Android-Statusleiste oben und die native Android-Navigationsleiste unten bleiben jedoch an ihrer Position.

Altes Verhalten: Chrome für Android ohne Unterstützung für Edge-to-Edge-Anzeige und https://developer.chrome.com/ wird geladen.

Hier ändert sich die Größe des Layout-Viewports, wenn die Adressleiste von Chrome ein- oder ausgeblendet wird.

Chrome-Verhalten bei Edge‑to‑Edge

Ab Chrome 135 kann Chrome Webinhalte bis zum unteren Geräterand rendern, indem der Darstellungsbereich in den Bereich der Bedienung über Gesten erweitert wird.

Dynamisches Edge-to-Edge-Design mit „Kinn“

Standardmäßig wird in Chrome Edge-to-Edge eine neue dynamische untere Leiste, das sogenannte „Kinn“, über dem Bereich der Bedienung über Gesten angezeigt. Genau wie die Chrome-Adressleiste wird auch dieses Kinn ausgeblendet, wenn Sie mit dem Scrollen beginnen. Außerdem wirkt es sich auf die Größe des Darstellungsbereichs aus.

In der folgenden Aufnahme von Chrome für Android mit Unterstützung für Edge-to-Edge-Anzeigen werden sowohl die Chrome-Adressleiste als auch das Kinn dynamisch ein- und ausgeblendet, wenn die Seite nach unten gescrollt wird. Dadurch wird der Viewport erweitert und Webinhalte können bis zum unteren Rand des Geräts dargestellt werden.

Neues Verhalten: Chrome für Android mit Unterstützung für Edge-to-Edge-Anzeige und https://developer.chrome.com/ wird geladen. Beachten Sie, wie sich das untere Kinn beim Scrollen der Seite aus dem Weg schiebt.

Dieses Verhalten ist ab Chrome 135 das neue Standardverhalten von Chrome.

Standardmäßig randlos mit Opt-in

Websites, die für die Darstellung auf dem gesamten Bildschirm entwickelt wurden, können dies durch Anpassen des viewport-Meta-Tags angeben. Wenn diese Option aktiviert ist, wird der Viewport standardmäßig bis zum unteren Rand erweitert, ohne dass das Kinn jemals sichtbar ist.

Neues Verhalten bei Aktivierung von Edge-to-Edge: Der Darstellungsbereich erstreckt sich beim Seitenaufbau bis zum unteren Rand. Es ist kein Kinn vorhanden.

Eine Seite kann angeben, dass sie den Edge-to-Edge-Modus unterstützt, indem sie das Meta-Tag viewport und den zugehörigen Schlüssel viewport-fit verwendet.

Wenn Sie die Edge-to-Edge-Funktion aktivieren möchten, legen Sie viewport-fit auf den Wert von cover fest.

<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /

Weitere Informationen zu den verschiedenen Werten von viewport-fit

Umgang mit Inhalten, die möglicherweise durch die Bedienung über Gesten verdeckt werden

Im Edge-to-Edge-Modus sollten Sie alle Inhalte berücksichtigen, die möglicherweise durch die Leiste für die Bedienung über Gesten verdeckt werden.

In den meisten Fällen müssen Sie nichts tun, da sich das untere Kinn von selbst aus dem Weg bewegt. Nutzer können weiterhin wie gewohnt auf alle Inhalte Ihrer Website zugreifen.

Wenn Sie sich jedoch dafür entscheiden, standardmäßig den gesamten Bildschirm zu nutzen, oder ein Element am unteren Rand des Viewports positioniert ist, müssen Sie berücksichtigen, dass diese Inhalte möglicherweise verdeckt werden.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

Wenn das Kinn vorhanden ist, können Nutzer anfangs auf die Inhalte zugreifen. Wenn das Kinn verschwindet, werden die Inhalte jedoch von der Navigationsleiste von Android verdeckt.

Abbildungen eines Android-Geräts mit Chrome für Android, das über den gesamten Bildschirm angezeigt wird. Die Abbildung links zeigt Chrome mit sichtbarem Kinn. Die unten verankerten Inhalte (rot dargestellt) befinden sich direkt darüber. Auf der Abbildung rechts ist Chrome ohne sichtbares Kinn zu sehen. Dort liegt der unten verankerte Inhalt am unteren Rand des Geräts an. Der Text dazu verdeutlicht, dass unten positionierte Inhalte jetzt durch die Navigationsleiste für die Bedienung über Gesten verdeckt werden.
Abbildung einer Website mit einem unten positionierten Element mit `bottom: 0`. Wenn das Kinn sichtbar ist, befindet sich das unten positionierte Element über der Navigationsleiste von Android. Wenn das Kinn sich entfernt hat, wird das Element hinter der Navigationsleiste von Android positioniert, wodurch es an dieser Stelle teilweise verdeckt wird.

Um das Problem zu beheben, können Sie die Insets für den sicheren Bereich verwenden, um die betroffenen Elemente entweder immer über der nativen Android-Bedienung über Gesten am unteren Bildschirmrand zu positionieren oder ihren Hintergrund in diesen Bereich zu erweitern.

Die Insets für den sicheren Bereich

Die Einzüge für den sicheren Bereich sind vier Umgebungsvariablen, die ein Rechteck durch seine oberen, rechten, unteren und linken Einzüge vom Rand des Viewports definieren.

Zusammen bilden diese vier Werte das Rechteck für den sicheren Bereich, in dem Inhalte platziert werden können, ohne dass sie durch Elemente wie die Android-Bedienung über Gesten verdeckt werden.

Abbildung eines Android-Geräts mit Chrome im Edge-to-Edge-Modus. Das Kinn hat eine ausziehbare Ansicht. In Chrome wird das Rechteck für den sicheren Bereich gelb dargestellt. Der untere Rand befindet sich direkt über der Bedienung über Gesten. In der Navigationsleiste für die Bedienung über Gesten wird der untere Teil des Viewports blau dargestellt. Im Text dazu wird erklärt, dass das Rechteck des sicheren Bereichs im Darstellungsbereich durch den unteren Einsatz des sicheren Bereichs (safe-area-bottom-inset) eingerückt wird, wodurch verhindert wird, dass Inhalte unter der Bedienung über Gesten gerendert werden.
Abbildung von Chrome im Edge-to-Edge-Modus. Der Viewport und das Rechteck für den sicheren Bereich sind gelb dargestellt. Da das Kinn eingezogen ist, verhindert der untere Einsatz des sicheren Bereichs, dass das Rechteck des sicheren Bereichs in die Bedienung über Gesten reicht. Daher sehen Sie den Viewport unter der Navigationsleiste für Gesten.

Untere Einrückung des sicheren Bereichs verwenden

Verwenden Sie für Elemente, die am unteren Rand des Darstellungsbereichs positioniert sind, safe-area-inset-bottom als Wert für die bottom-Eigenschaft, damit sie nicht unter der Bedienung über Gesten-Navigationsleiste positioniert werden. Der von safe-area-inset-bottom zurückgegebene Wert wird dynamisch aktualisiert, wenn das Kinn aus dem Weg geräumt wird. So bleiben die unten positionierten Elemente über der Bedienung über Gesten von Android.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}
Abbildung eines Android-Geräts mit Chrome im Edge-to-Edge-Modus. In der Visualisierung links ist das Kinn zu sehen und die unten verankerten Inhalte befinden sich direkt darüber. In der Visualisierung rechts ist das Kinn nicht zu sehen und die unten verankerten Inhalte befinden sich an derselben Stelle wie links. Dadurch sind reguläre Inhalte unter der Navigationsleiste für Gesten sichtbar.
Illustrationen einer Website mit einem unten positionierten Element, das den unteren Einsatz für den sicheren Bereich mit der Eigenschaft bottom verwendet. Wenn das Kinn sichtbar ist, befindet sich die Leiste über der Bedienung über Gesten von Android. Wenn das Kinn verschwindet, befindet sich das Element auch darüber.

Wie Sie in den Abbildungen sehen können, ist das Ergebnis noch nicht perfekt: Wenn das Kinn aus dem Weg geräumt wird, werden die verbleibenden Seiteninhalte im Bereich der Navigationsleiste für Gesten sichtbar. Das liegt daran, dass sich der Darstellungsbereich in diesem Zustand in den Bereich der Bedienung über Gesten erstreckt.

Damit Inhalte nicht unter Inhalten mit Anker unten gerendert werden, wird häufig padding-bottom auf safe-area-inset-bottom gesetzt. So wird das unten verankerte Element automatisch größer, wenn das Kinn verdeckt wird. Das funktioniert zwar, wird aber nicht empfohlen, da es zu Layout-Thrashing kommt, während das Kinn aus dem Weg geräumt wird.

Legen Sie padding nicht auf einen Wert für „safe-area-inset“ fest.

.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. */
}

Unteren Inset des Safe Area und unteren maximalen Inset des Safe Area verwenden

Stattdessen wird empfohlen, eine Kombination aus safe-area-inset-bottom und safe-area-max-inset-bottom zu verwenden. Im Gegensatz zum dynamischen safe-area-inset-bottom, das dynamisch aktualisiert wird, wenn das Kinn aus dem Weg gerät, stellt safe-area-max-inset-bottom den Maximalwert von safe-area-inset-bottom dar.

Verwenden Sie safe-area-max-inset-bottom, um das unten verankerte Element nach vorn zu verschieben, und kombinieren Sie es mit safe-area-inset-bottom, um das Element nach unten zu ziehen, sodass es sich hinter dem Kinn befindet.

 safe-area-max-inset-bottom in Kombination mit safe-area-inset-bottom verwenden

: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));
}

Live-Demo ausprobieren

Das visuelle Ergebnis ist dasselbe wie beim padding-bottom: env(safe-area-inset-bottom, 0px);-Ansatz, aber die Leistung ist viel besser. Da sich nur der berechnete Wert für bottom ändern muss, wenn sich das Kinn entfernt, kommt es nicht zu Layout-Thrashing.

Abbildung eines Android-Geräts mit Chrome im Edge-to-Edge-Modus. In der Visualisierung links ist das Kinn zu sehen und die unten verankerten Inhalte befinden sich direkt darüber. In der Visualisierung rechts ist das Kinn nicht zu sehen und die unten verankerten Inhalte haben sich optisch ausgedehnt, um den Platz einzunehmen, an dem sich das Kinn ursprünglich befand. Das sorgt für einen schönen visuellen Effekt und verhindert, dass reguläre Seiteninhalte unter dem Bereich der Bedienung über Gesten sichtbar werden.
Illustrationen einer Website mit einem unten verankerten Element, bei dem die Insets des sicheren Bereichs berücksichtigt werden. Wenn das Kinn sichtbar ist (links), befindet sich das Element darüber. Wenn das Kinn nicht sichtbar ist, geht das Element optisch in die Bedienung über Gesten von Android über.

Edge-to-Edge vor Chrome 135 ausprobieren

Wenn Sie das Edge-to-Edge-Design vor der öffentlichen stabilen Version ausprobieren möchten, müssen Sie über chrome://flags einige Chrome-Funktions-Flags aktivieren:

  • EdgeToEdgeBottomChin (optional: Wenn Sie „Enabled Debug“ auswählen, wird die Hälfte des Kinns rosa gefärbt, um es besser von anderen Benutzeroberflächen zu unterscheiden)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (don't set to "Enabled" but set to "Enabled Dispatch yOffset")
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (nicht auf „Aktiviert“, sondern auf „Scrollbare Variante aktiviert“ festlegen)

Die folgenden Flags dürfen nicht aktiviert sein:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

Starten Sie Chrome zweimal neu.

Ihre Meinung ist uns wichtig

Wenn Sie Feedback zu Chrome und der Edge-to-Edge-Implementierung haben, erstellen Sie bitte einen Chromium-Bug in der Komponente „UI > Browser > Mobile > EdgeToEdge“. Vielen Dank für Ihr Feedback.