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.

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.

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.

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.

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.
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.
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.
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.

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
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.

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

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