Diese Seite wurde von der Cloud Translation API übersetzt.

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

Bramus

Veröffentlicht: 28. Februar 2025

„Bündig“ ist eine Android-Funktion, mit der Apps die gesamte Breite und Höhe des Displays bedecken können, indem sie hinter den Android-Systemleisten gezeichnet werden.

Vor Chrome 135 wurde Chrome auf 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 diese Änderung zu nutzen.

Bars überall

Android bietet Systemleisten, die vom Betriebssystem selbst bereitgestellt werden.

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

Oben auf dem Display befindet sich die Statusleiste mit Benachrichtigungs- und Systemsymbolen.

Abbildung des oberen Teils eines Android-Geräts mit hervorgehobener Systemleiste — Die Statusleiste unter Android, hervorgehoben *(source)*.

Unten auf dem Bildschirm befindet sich die Navigationsleiste, über die Sie die Navigation mit den Steuerelementen „Zurück“, „Startseite“ und „Übersicht“ steuern können. Das kann die klassische Navigation mit drei Schaltflächen oder die moderne Navigationsleiste mit Gesten sein.

Abbildung des unteren Teils eines Android-Geräts mit sichtbarer Navigationsleiste für Touch-Gesten — Die Leiste für die Bedienung über Gesten *(source).*

Neben den Android-Systemleisten bietet Chrome eine Adressleiste, die sich beim Scrollen dynamisch maximiert und minimiert.

Chrome jetzt randlos

Wenn Sie eine Website aufrufen, wird sie in einem Rechteck angezeigt, das als Viewport (Layout) bezeichnet wird.

In Chrome auf Android wird dieser Layout-Viewport vor Chrome 135 zwischen der oberen Statusleiste und der unteren Navigationsleiste für Touch-Gesten gezeichnet. Die Anwesenheit oder Abwesenheit der Adressleiste von Chrome kann sich auf die Größe des Darstellungsbereichs auswirken. Der Darstellungsbereich wird jedoch niemals in die obere Systemleiste oder die untere Navigationsleiste für Touch-Gesten erweitert.

Abbildungen eines Android-Geräts mit Chrome auf Android, das nicht randlos ist In der Abbildung auf der linken Seite ist Chrome mit maximierter Adressleiste zu sehen. Zwischen der Adressleiste und der Navigationsleiste für Touch-Gesten befindet sich ein grünes Feld mit einer Größe von 100 svh. In der Abbildung rechts ist Chrome mit eingeblendeter Adressleiste zu sehen. Zwischen der Statusleiste und der Navigationsleiste für Touch-Gesten befindet sich ein grünes Feld mit einer Größe von 100 v. H. Der Viewport selbst hat einen blauen gestrichelten Umriss. — Die Mindest- und Maximalgröße des Darstellungsbereichs in Chrome für Android vor Chrome 135. Diese Größen werden als kleiner und großer Darstellungsbereich bezeichnet. Der Viewport selbst hat einen blauen gestrichelten Umriss.

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

Abbildungen des Darstellungsbereichs in Chrome auf Android, der nicht bildschirmfüllend ist (links), und in Chrome auf Android, der bildschirmfüllend ist (rechts). Jede Visualisierung hat ein blaues Feld, das ein Element mit einer Höhe von 100 vh darstellt. Im Text auf der linken Seite wird erläutert, was passiert, wenn der Rahmen nicht bündig ist. Es steht dort: „Der Darstellungsbereich bleibt zwischen der oberen Statusleiste und der unteren Navigationsleiste für Touch-Gesten eingeklemmt.“ Im Text auf der rechten Seite wird erläutert, was passiert, wenn der Rahmen bündig mit dem Display abschließt. Es steht dort: „Der Darstellungsbereich reicht bis in die Navigationsleiste für Touch-Gesten hinein.“ — Das große Viewport, das in Chrome auf Android nicht randlos ist (links), und in Chrome, das randlos ist (rechts). In Chrome mit Unterstützung für Vollbild wird der Darstellungsbereich in den Bereich der Navigationsleiste für Touch-Gesten erweitert, wenn die dynamischen Symbolleisten von Chrome minimiert sind.

Chrome-Verhalten ohne Edge-to-Edge

In der folgenden Aufnahme ist Chrome auf Android ohne Unterstützung für Vollbildmodus zu sehen. Die Chrome-Adressleiste (oben) wird beim Scrollen der Seite dynamisch ausgeblendet. Die native Android-Statusleiste oben und die native Android-Navigationsleiste unten bleiben jedoch an ihrem Platz.

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

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

Chrome-Verhalten bei Edge-to-Edge

Ab Chrome 135 kann Chrome Webinhalte bis zum unteren Geräterand anzeigen, indem der Darstellungsbereich in den Bereich der Navigationsleiste für Touch-Gesten erweitert wird.

Dynamisches Display von Rand zu Rand mit „Kinn“

In der Vollbildansicht von Chrome wird standardmäßig eine neue dynamische Leiste am unteren Bildschirmrand angezeigt, die als „Kinn“ bezeichnet wird. Genau wie die Chrome-Adressleiste verschwindet dieser Bereich, wenn Sie mit dem Scrollen beginnen, und wirkt sich auf die Größe des Darstellungsbereichs aus.

In der folgenden Aufnahme von Chrome für Android mit Unterstützung für Displays ohne Ränder ziehen sich sowohl die Chrome-Adressleiste als auch das Kinn dynamisch zurück, wenn die Seite nach unten gescrollt wird. Dadurch wird der Darstellungsbereich vergrößert, sodass Webinhalte bis zum unteren Rand des Geräts dargestellt werden können.

Neues Verhalten: Chrome für Android mit Unterstützung für Vollbild und https://developer.chrome.com/ geladen. Beachten Sie, dass das untere Kinn beim Scrollen der Seite aus dem Weg gleitet.

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

Vollbildmodus standardmäßig mit Opt-in

Websites, die für die Vollbildanzeige entwickelt wurden, können dies durch Anpassung des viewport-Metatags angeben. Wenn diese Option aktiviert ist, erstreckt sich der Darstellungsbereich standardmäßig bis zum unteren Rand, ohne dass das Kinn sichtbar wird.

Neues Verhalten bei aktiviertem Edge-to-Edge-Modus: Der Darstellungsbereich erstreckt sich beim Laden der Seite bis zum unteren Rand. Es ist kein Kinn vorhanden.

Eine Seite kann mit dem viewport-Meta-Tag und dem viewport-fit-Schlüssel angeben, dass sie randlos ist.

Wenn Sie die Vollansicht aktivieren möchten, setzen Sie viewport-fit auf den Wert cover.

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

Weitere Informationen zu den verschiedenen Werten von viewport-fit finden Sie in der MDN.

Umgang mit Inhalten, die von der Navigationsleiste für Touch-Gesten verdeckt werden können

Im Vollbildmodus sollten Sie alle Inhalte berücksichtigen, die von der Navigationsleiste für Touch-Gesten verdeckt werden könnten.

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

Wenn Sie jedoch standardmäßig die Vollansicht aktivieren oder ein Element am unteren Rand des Darstellungsbereichs platziert ist, müssen Sie möglicherweise 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, sind die Inhalte für Nutzer anfangs erreichbar, werden aber von der Navigationsleiste von Android verdeckt, wenn das Kinn verschwindet.

Abbildungen eines Android-Geräts mit Chrome auf Android, das bis zum Rand bedeckt ist In der Abbildung auf der linken Seite ist Chrome mit sichtbarem Kinn zu sehen. Die unten verankerten Inhalte (rot dargestellt) liegen direkt darüber. In der Abbildung rechts ist Chrome ohne Kinn zu sehen. Dort liegen die an der Unterseite verankerten Inhalte an der Unterkante des Geräts an. Der begleitende Text erklärt, dass Inhalte, die sich unten befinden, jetzt von der Navigationsleiste für Touch-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 weg ist, wird das Element hinter der Navigationsleiste von Android positioniert, wodurch es an dieser Stelle teilweise verdeckt wird.

Verwenden Sie die Werte für den sicheren Bereich, um die betroffenen Elemente entweder immer über der nativen Android-Navigationsleiste für Touch-Gesten zu platzieren oder ihren Hintergrund in diesen Bereich zu erweitern.

Die Safe-Area-Einschnitte

Browser Support

Source

Die Abstände zum sicheren Bereich sind vier Umgebungsvariablen, die ein Rechteck durch die Einzüge oben, rechts, unten und links vom Rand des Darstellungsbereichs definieren.

Zusammen bilden diese vier Werte das Safe Area-Rechteck, in dem Inhalte sicher platziert werden können, damit sie nicht von Elementen wie der Navigationsleiste für Touch-Gesten von Android verdeckt werden.

Abbildung eines Android-Geräts mit Chrome im Vollbildmodus Das Kinn hat eine herausziehbare Ansicht. In Chrome ist das gelb hervorgehobene Rechteck für den sicheren Bereich zu sehen. Der untere Rand befindet sich direkt über der Leiste für die Bedienung per Geste. In der Navigationsleiste für Touch-Gesten ist der untere Teil des Darstellungsbereichs blau hervorgehoben. Der dazugehörige Text besagt, dass das Rechteck für den sicheren Bereich durch „safe-area-bottom-inset“ in den Darstellungsbereich eingefügt wird, wodurch verhindert wird, dass Inhalte unter der Navigationsleiste für Touch-Gesten dargestellt werden. — Abbildung von Chrome im Vollbildmodus, wobei der Darstellungsbereich und das Rechteck für den sicheren Bereich gelb hervorgehoben sind. Da das Kinn eingefahren ist, verhindert der untere Einschnitt des sicheren Bereichs, dass der sichere Bereich in die Navigationsleiste für Touch-Gesten hineinragt. Dadurch wird der Viewport-Peek unter der Navigationsleiste für Touch-Gesten angezeigt.

Unteren Safe-Area-Einzug verwenden

Verwenden Sie für Elemente, die sich am unteren Rand des Darstellungsbereichs befinden, safe-area-inset-bottom als Wert für das Attribut bottom, damit sie nicht unter der Leiste für die Bedienung per Geste platziert werden. Der von safe-area-inset-bottom zurückgegebene Wert wird dynamisch aktualisiert, wenn das Kinn sich wegbewegt. Dadurch bleiben die unten positionierten Elemente über der Navigationsleiste für Touch-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 Vollbildmodus In der Visualisierung auf der linken Seite ist der Kinnbereich zu sehen und der unten verankerte Inhalt befindet sich direkt darüber. In der Visualisierung auf der rechten Seite ist das Kinn nicht sichtbar und die unten verankerten Inhalte sind an derselben Stelle wie auf der linken Seite positioniert. Dadurch sind normale Inhalte unter der Navigationsleiste für Touch-Gesten sichtbar. — Abbildungen einer Website mit einem unten positionierten Element, das den unteren sicheren Bereich mit der Property `bottom` verwendet. Wenn das Kinn sichtbar ist, befindet sich die Leiste über der Navigationsleiste für Touch-Gesten von Android. Wenn das Kinn verschwindet, befindet sich das Element auch darüber.

Wie Sie in den Abbildungen sehen, ist das Ergebnis noch nicht perfekt: Wenn das Kinn aus dem Weg geschoben wird, wird der verbleibende Seiteninhalt im Bereich der Navigationsleiste für Touch-Gesten sichtbar. Das liegt daran, dass sich der Darstellungsbereich in diesem Zustand in den Bereich der Navigationsleiste für Touch-Gesten erstreckt.

Um zu verhindern, dass Inhalte unter an der Unterseite verankerten Inhalten dargestellt werden, wird häufig die padding-bottom auf die safe-area-inset-bottom gesetzt. So wird das unten verankerte Element automatisch größer, wenn das Kinn verschwindet. Dieser Ansatz funktioniert zwar, wird aber nicht empfohlen, da es zu Layout-Überlastungen kommt, während sich das Kinn wegbewegt.

Legen Sie für padding keinen Wert für den sicheren Bereich 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. */
}

Untere Einfassung des sicheren Bereichs und untere maximale Einfassung des sicheren Bereichs 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, der sich dynamisch aktualisiert, wenn das Kinn aus dem Weg ist, stellt der safe-area-max-inset-bottom den Maximalwert des safe-area-inset-bottom dar.

Verwende safe-area-max-inset-bottom, um das unten verankerte Element nach vorne zu vergrößern, und kombiniere 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 ansehen

Das visuelle Ergebnis ist mit dem Ansatz padding-bottom: env(safe-area-inset-bottom, 0px); identisch, die Leistung ist jedoch viel besser. Da sich nur der berechnete Wert für bottom ändern muss, wenn sich das Kinn wegbewegt, kommt es nicht zu einem Layout-Trashing.

Vollbildmodus vor Chrome 135 testen

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

EdgeToEdgeBottomChin (Optional: Wenn Sie „Debug aktiviert“ auswählen, wird die Hälfte des Kinns rosa eingefärbt, um es besser von anderen UI-Elementen unterscheiden zu können.)
DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor (nicht auf „Enabled“ (Aktiviert), sondern auf „Enabled Dispatch yOffset“ (Aktivieren von yOffset-Dispatch) setzen)
DynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint (nicht „Aktiviert“, sondern „Aktivierte scrollbare Variante“)

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 Vollbildansicht haben, können Sie sich an uns wenden, indem Sie einen Chromium-Fehler in der Komponente „UI > Browser > Mobile > EdgeToEdge“ melden. Vielen Dank für Ihr Feedback.