Gepubliceerd: 28 februari 2025
Edge-to-edge is een Android-functie waarmee applicaties de gehele breedte en hoogte van het scherm kunnen bestrijken door achter de Android-systeembalken te tekenen.
Vóór Chrome 135 tekende Chrome op Android niet van rand tot rand. In deze handleiding wordt uitgelegd welk effect deze verandering heeft op websites en wat u als ontwikkelaar kunt doen om deze verandering te omarmen.
Bars overal
Android wordt geleverd met systeembalken die door het besturingssysteem zelf worden geleverd.
Samen worden de statusbalk, de ondertitelbalk en de navigatiebalk de systeembalken genoemd. Ze geven belangrijke informatie weer, zoals het batterijniveau, de tijd en meldingswaarschuwingen, en bieden directe apparaatinteractie vanaf elke locatie.
Bovenaan het scherm vindt u de statusbalk , die meldingspictogrammen en systeempictogrammen bevat.

Onderaan het scherm vindt u de navigatiebalk , waarmee u de navigatie kunt regelen met de knoppen Terug, Thuis en Overzicht. Dit kan de klassieke navigatie met drie knoppen zijn of de moderne navigatiebalk met gebaren.

Naast de Android-systeembalken wordt Chrome zelf geleverd met een adresbalk die zichzelf dynamisch uit- en intrekt terwijl u scrolt.
Chrome gaat van rand tot rand
Wanneer u een website bezoekt, wordt die website gepresenteerd in een rechthoek die bekend staat als de (lay-out) viewport .
In Chrome op Android, vóór Chrome 135, wordt dat lay-outvenster getekend tussen de bovenste statusbalk en de onderste gebarennavigatiebalk. De aanwezigheid van de adresbalk van Chrome (of het ontbreken daarvan) kan de grootte van de viewport beïnvloeden, maar de viewport zal nooit worden uitgebreid naar de bovenste systeembalk of de onderste gebarennavigatiebalk.

Vanaf Chrome 135 mag de viewport zich uitbreiden naar de gebarennavigatiebalk van Android. Dit is het gedrag dat wordt beschreven als edge-to-edge .

Chrome-gedrag zonder edge-to-edge
De volgende opname toont Chrome op Android zonder ondersteuning van rand tot rand, waarbij de adresbalk van Chrome (bovenaan) dynamisch uit de weg gaat als er over de pagina wordt gescrold. De Android-native statusbalk bovenaan en de Android-native navigatiebalk onderaan blijven echter op hun plaats.
Hier verandert de grootte van het lay-outvenster naarmate de adresbalk van Chrome wordt ingetrokken of uitgebreid.
Chrome-gedrag met edge-to-edge
Vanaf Chrome 135 kan Chrome webinhoud tot aan de onderkant van het apparaat tekenen door de viewport uit te breiden naar het gebarennavigatiebalkgebied.
Dynamisch van rand tot rand met "de kin"
Standaard toont Chrome van rand tot rand een nieuwe dynamische onderbalk, bekend als 'de kin', boven het gebied van de gebarennavigatiebalk. Net als de Chrome-adresbalk beweegt deze kin uit de weg wanneer u begint te scrollen, wat de grootte van de viewport beïnvloedt.
In de volgende opname van Chrome op Android met ondersteuning van rand tot rand trekken zowel de adresbalk als de kin van Chrome zich dynamisch terug terwijl de pagina naar beneden scrolt. Hierdoor wordt de viewport groter, waardoor webinhoud tot aan de onderkant van het apparaat kan worden getekend.
Dit kingedrag is het nieuwe standaard Chrome-gedrag vanaf Chrome 135 en later.
Standaard van rand tot rand gaan met een opt-in
Websites die zijn gebouwd voor edge-to-edge kunnen dit aangeven door de viewport
metatag aan te passen. Indien ingeschakeld, strekt de viewport zich standaard uit tot aan de onderrand zonder dat de kin ooit zichtbaar is.
Een pagina kan aangeven dat deze van rand tot rand ondersteunt met behulp van de viewport
metatag en de viewport-fit
sleutel.
Als u zich wilt aanmelden voor rand-tot-rand, stelt u viewport-fit
in op de waarde van cover
.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Lees meer over de verschillende waarden van viewport-fit
op MDN .
Omgaan met inhoud die mogelijk wordt belemmerd door de gebarennavigatiebalk
In de rand-tot-rand-modus moet u rekening houden met alle inhoud die mogelijk wordt belemmerd door de gebarennavigatiebalk.
In de meeste gevallen hoeft u niets te doen, omdat de onderkin vanzelf opzij beweegt. Gebruikers kunnen nog steeds alle inhoud op uw website bereiken zoals voorheen.
Als u er echter voor kiest om standaard van rand tot rand te gaan of als u een element onder aan de viewport heeft geplaatst, moet u er mogelijk rekening mee houden dat die inhoud mogelijk wordt gedekt.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Wanneer de kin aanwezig is, is de inhoud in eerste instantie bereikbaar voor gebruikers, maar wordt deze belemmerd door de navigatiebalk van Android zodra de kin verdwijnt.

Om dit te verzachten, gebruikt u de inzetstukken in het veilige gebied om de getroffen elementen altijd boven de Android-native onderste gebarennavigatiebalk te plaatsen, of om hun achtergrond tot in dat gebied te laten uitstrekken.
Het veilige gebied wordt ingezet
De inzetstukken voor het veilige gebied zijn vier omgevingsvariabelen die een rechthoek definiëren aan de hand van de inzetstukken bovenaan, rechts, onderaan en links vanaf de rand van het zichtvenster.
Gecombineerd vormen deze vier waarden de rechthoek van het veilige gebied waarin het veilig is om inhoud te plaatsen, zodat deze niet wordt gehinderd door zaken als de Android-gebarennavigatiebalk.

Gebruik de onderste inzet van het veilige gebied
Voor elementen die zich onder aan het venster bevinden, gebruikt u de safe-area-inset-bottom
als waarde voor de eigenschap bottom
om te voorkomen dat deze onder de gebarennavigatiebalk wordt geplaatst. De waarde die wordt geretourneerd door safe-area-inset-bottom
wordt dynamisch bijgewerkt naarmate de kin uit de weg gaat, waardoor de onderaan geplaatste elementen mooi boven de gebarennavigatiebalk van Android blijven.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}

bottom
eigenschap. Wanneer de kin zichtbaar is, bevindt de balk zich boven de gebarennavigatiebalk van Android. Wanneer de kin weggaat, zit het element er ook boven.Zoals u in de illustraties kunt zien, is het resultaat nog niet perfect: wanneer de kin uit de weg wordt bewogen, wordt de resterende pagina-inhoud zichtbaar in het gebied van de gebarennavigatiebalk. Dit komt omdat in deze staat de viewport zich uitstrekt tot in het gebied van de gebarennavigatiebalk.
Om te voorkomen dat inhoud onder in de bodem verankerde inhoud terechtkomt, is een veelgebruikte aanpak het instellen van de padding-bottom
op de safe-area-inset-bottom
. Op die manier groeit het bodemverankerde element automatisch naarmate de kin zich verbergt. Hoewel dit wel werkt, wordt deze aanpak niet aanbevolen, omdat dit resulteert in het slaan van de lay-out terwijl de kin uit de weg gaat.
Stel de padding
niet in op een safe-area-inset-waarde.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
Gebruik van de veilige zone onderste inzet en de veilige onderste maximale inzet
In plaats daarvan is de aanbevolen aanpak het gebruik van een combinatie van safe-area-inset-bottom
en safe-area-max-inset-bottom
. In tegenstelling tot de dynamische safe-area-inset-bottom
die dynamisch wordt bijgewerkt als de kin uit de weg gaat, vertegenwoordigt de safe-area-max-inset-bottom
de maximale waarde van de safe-area-inset-bottom
.
Gebruik deze safe-area-max-inset-bottom
om het aan de onderkant verankerde element aan de voorkant te laten groeien, en combineer het met safe-area-inset-bottom
om het element naar beneden te trekken zodat het achter de kin zit.
Gebruik de safe-area-max-inset-bottom
in combinatie met de 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));
}
Het visuele resultaat is hetzelfde als de padding-bottom: env(safe-area-inset-bottom, 0px);
aanpak, maar het presteert veel beter. Omdat alleen de berekende waarde voor bottom
hoeft te veranderen als de kin weggaat, vindt er geen geseling van de lay-out plaats.

Probeer het van rand tot rand vóór Chrome 135
Om edge-to-edge te proberen vóór de publieke stabiele release, moet je een flink aantal Chrome-functievlaggen inschakelen via chrome://flags
:
-
EdgeToEdgeBottomChin
(als u dit optioneel instelt op "Enabled Debug", wordt de helft van de kin roze gekleurd om deze duidelijker te onderscheiden van andere gebruikersinterfaces) -
DrawCutOutEdgeToEdge
-
BottomBrowserControlsRefactor
(niet ingesteld op "Ingeschakeld", maar ingesteld op "Ingeschakeld Dispatch yOffset") -
DynamicSafeAreaInsets
-
DynamicSafeAreaInsetsOnScroll
-
EdgeToEdgeWebOptIn
-
DrawKeyNativeEdgeToEdge
-
EdgeToEdgeSafeAreaConstraint
(niet ingesteld op "Ingeschakeld", maar ingesteld op "Ingeschakelde schuifbare variatie")
Zorg ervoor dat de volgende vlaggen niet zijn ingeschakeld:
-
DrawNativeEdgeToEdge
-
EdgeToEdgeEverywhere
Start Chrome twee keer opnieuw.
Wij willen uw feedback
Als u feedback heeft over Chrome en de edge-to-edge-implementatie ervan, neem dan contact met ons op door een Chromium-bug in te dienen in de component 'UI > Browser > Mobiel > EdgeToEdge' . Wij stellen uw feedback op prijs.