Veröffentlicht: 28. Februar 2025
Edge-to-Edge ist eine Android-Funktion, mit der Apps die gesamte Breite und Höhe des Displays nutzen können, indem sie hinter den Android-Systemleisten gezeichnet werden.
Vor Chrome 135 wurde Chrome unter Android nicht im Edge-to-Edge-Modus 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 vorzubereiten.
Überall Balken
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 die direkte Interaktion mit dem Gerät von überall aus.
Oben auf dem Bildschirm befindet sich die Statusleiste mit Benachrichtigungs- und Systemsymbolen.
Unten auf dem Display befindet sich die Navigationsleiste, über die du die Navigation mit den Steuerelementen „Zurück“, „Startbildschirm“ und „Übersicht“ steuern kannst. Das kann die klassische Bedienung über drei Schaltflächen oder die moderne Bedienung über Gesten sein.
Zusätzlich zu den Android-Systemleisten bietet Chrome eine eigene Adressleiste, die beim Scrollen dynamisch ein- und ausgeblendet wird.
Chrome im Edge-to-Edge-Modus
Wenn Sie eine Website aufrufen, wird sie in einem Rechteck dargestellt, das als (Layout-)Darstellungsbereich bezeichnet wird.
In Chrome für Android wird der Layout-Darstellungsbereich vor Chrome 135 zwischen der oberen Statusleiste und der unteren Leiste für die Bedienung über Gesten gezeichnet. Das Vorhandensein der Adressleiste von Chrome (oder das Fehlen dieser) 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.
Ab Chrome 135 kann der Darstellungsbereich in die Android-Leiste für die Bedienung über Gesten erweitert werden. Dieses Verhalten wird als Edge‑to‑Edge bezeichnet.
Chrome-Verhalten ohne Edge‑to‑Edge-Modus
Die folgende Aufnahme zeigt Chrome unter Android ohne Unterstützung für die randlose Darstellung. Die Adressleiste von Chrome (oben) wird beim Scrollen der Seite dynamisch ausgeblendet. Die Android-eigene Statusleiste oben und die Android-eigene Navigationsleiste unten bleiben jedoch an Ort und Stelle.
Hier ändert sich die Größe des Layout-Darstellungsbereichs, wenn die Adressleiste von Chrome ein- oder ausgeblendet wird.
Chrome-Verhalten bei Edge‑to‑Edge-Anzeige
Ab Chrome 135 kann Chrome Webinhalte bis zum unteren Geräterand darstellen, indem der Darstellungsbereich in den Bereich der Bedienung über Gesten erweitert wird.
Dynamisches randloses Display mit „Kinn“
Standardmäßig wird im randlosen Modus von Chrome eine neue dynamische untere Leiste, die sogenannte „Chin“, über dem Bereich der Navigationsleiste für die Bedienung über Gesten angezeigt. Genau wie die Chrome-Adressleiste wird diese Leiste beim Scrollen ausgeblendet und wirkt sich auf die Größe des Darstellungsbereichs aus.
In der folgenden Aufnahme von Chrome für Android mit Unterstützung für die randlose Darstellung werden sowohl die Chrome-Adressleiste als auch die untere Leiste dynamisch ausgeblendet, wenn auf der Seite nach unten gescrollt wird. Dadurch wird der Darstellungsbereich erweitert, sodass Webinhalte bis zum unteren Rand des Geräts angezeigt werden können.
Dieses Verhalten der unteren Leiste ist ab Chrome 135 das neue Standardverhalten von Chrome.
Standardmäßige randlose Darstellung mit Opt-in
Websites, die für die randlose Darstellung entwickelt wurden, können dies durch Anpassen des Meta-Tags viewport angeben. Wenn diese Option aktiviert ist, wird der Darstellungsbereich standardmäßig bis zum unteren Rand erweitert, ohne dass das Kinn jemals sichtbar ist.
Eine Seite kann mit dem Meta-Tag viewport und dem Schlüssel viewport-fit angeben, dass sie die randlose Darstellung unterstützt.
Wenn Sie die randlose Darstellung aktivieren möchten, legen Sie für viewport-fit den Wert cover fest.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Weitere Informationen zu den verschiedenen Werten von viewport-fit finden Sie auf MDN.
Umgang mit Inhalten, die möglicherweise von der Navigationsleiste für die Bedienung über Gesten verdeckt werden
Im randlosen Modus sollten Sie alle Inhalte berücksichtigen, die möglicherweise durch die Navigationsleiste für die Bedienung über Gesten verdeckt werden.
In den meisten Fällen musst du nichts tun, da sich die untere Leiste von selbst aus dem Weg bewegt. Nutzer können weiterhin wie gewohnt auf alle Inhalte Ihrer Website zugreifen.
Wenn Sie jedoch standardmäßig die randlose Darstellung aktivieren oder ein Element am unteren Rand des Darstellungsbereichs positioniert haben, müssen Sie möglicherweise berücksichtigen, dass dieser Inhalt verdeckt werden könnte.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Wenn das Kinn vorhanden ist, ist der Inhalt für Nutzer anfangs erreichbar, wird aber durch die Navigationsleiste von Android verdeckt, wenn das Kinn verschwindet.
Um dieses Problem zu beheben, können Sie die Insets für den sicheren Bereich verwenden, um die betroffenen Elemente entweder immer über der nativen Android-Leiste für die Bedienung über Gesten zu positionieren oder ihren Hintergrund in diesen Bereich zu erweitern.
Die Einzüge des sicheren Bereichs
Die Safe Area Insets sind vier Umgebungsvariablen, die ein Rechteck durch seine oberen, rechten, unteren und linken Abstände vom Rand des Darstellungsbereichs 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-Leiste für die Bedienung über Gesten verdeckt werden.
Unteren Safe-Area-Inset 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 Navigationsleiste für die Bedienung über Gesten positioniert werden. Der von safe-area-inset-bottom zurückgegebene Wert wird dynamisch aktualisiert, wenn sich die untere Leiste wegbewegt. Dadurch bleiben die unten positionierten Elemente über der Navigationsleiste für die Bedienung über 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 dem Android-Navigationsziehpunkt für die Bedienung über Gesten. Wenn das Kinn ausgeblendet wird, befindet sich das Element darüber.Wie Sie in den Abbildungen sehen können, ist das Ergebnis noch nicht perfekt: Wenn das Kinn entfernt wird, wird der verbleibende Seiteninhalt im Bereich der Navigationsleiste für die Bedienung über Gesten sichtbar. In diesem Zustand erstreckt sich der Darstellungsbereich nämlich bis in den Bereich der Navigationsleiste für die Bedienung über Gesten.
Damit Inhalte nicht unter unten verankerten Inhalten dargestellt werden, wird häufig die padding-bottom auf die safe-area-inset-bottom festgelegt. So wird das unten verankerte Element automatisch vergrößert, wenn der untere Bereich ausgeblendet wird. Das funktioniert zwar, wird aber nicht empfohlen, da es zu Layout-Thrashing führt, während das Kinn aus dem Weg geräumt wird.
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. */
}
Den unteren Safe-Area-Inset und den maximalen unteren Safe-Area-Inset 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 sich das Kinn wegbewegt, stellt der safe-area-max-inset-bottom den Maximalwert des safe-area-inset-bottom dar.
Verwenden Sie dieses safe-area-max-inset-bottom, um das unten verankerte Element im Voraus zu vergrößern, und kombinieren Sie es mit safe-area-inset-bottom, um das Element nach unten zu ziehen, sodass es sich hinter dem Kinn befindet.
Verwenden Sie safe-area-max-inset-bottom in Kombination mit 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));
}
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 wegbewegt, kommt es nicht zu Layout-Thrashing.
Edge-to-Edge-Modus vor Chrome 135 ausprobieren
Wenn Sie die randlose Darstellung vor der öffentlichen stabilen Version ausprobieren möchten, müssen Sie über chrome://flags einige Chrome-Funktions-Flags aktivieren:
EdgeToEdgeBottomChin(Wenn Sie die Option „Enabled Debug“ (Debuggen aktiviert) auswählen, wird die Hälfte des unteren Bereichs rosa eingefärbt, um ihn besser von anderen UI-Elementen zu unterscheiden.)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(nicht auf „Aktiviert“ setzen, sondern auf „Aktiviert – Dispatch yOffset“)DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(nicht auf „Aktiviert“, sondern auf „Scrollbare Variante aktivieren“ festlegen)
Die folgenden Flags dürfen nicht aktiviert sein:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Starten Sie Chrome zweimal neu.
Ihre Meinung ist uns wichtig
Wenn Sie Feedback zu Chrome und der Implementierung des Edge-to-Edge-Modus haben, können Sie uns dieses mitteilen, indem Sie einen Chromium-Fehler in der Komponente „UI > Browser > Mobile > EdgeToEdge“ melden. Vielen Dank für Ihr Feedback.