Gepubliceerd: 28 februari 2025
Van rand tot rand is een Android-functie waarmee apps de hele breedte en hoogte van het scherm kunnen beslaan door achter de Android-systeembalken te tekenen.
Vóór Chrome 135 tekende Chrome op Android niet van rand tot rand. In deze gids leggen we uit wat het effect van deze wijziging is op websites en wat je als ontwikkelaar kunt doen om deze wijziging te omarmen.
Overal bars
Android wordt geleverd met systeembalken die worden geleverd door het besturingssysteem zelf.
De statusbalk, de bijschriftbalk en de navigatiebalk worden samen de systeembalken genoemd. Ze tonen belangrijke informatie, zoals het batterijniveau, de tijd en meldingen, en bieden directe apparaatinteractie vanaf elke locatie.
Bovenaan het scherm vind je de statusbalk met meldingsiconen en systeemiconen.
Onderaan het scherm vind je de navigatiebalk, waarmee je de navigatie kunt bedienen met de bedieningselementen Terug, Start en Overzicht. Dit kan de klassieke navigatie met 3 knoppen of de moderne navigatiebalk met gebaren zijn.
Naast de Android-systeembalken heeft Chrome zelf een adresbalk die dynamisch wordt uitgevouwen en ingetrokken terwijl je scrollt.
Chrome gaat van rand tot rand
Als je een website bezoekt, wordt die website gepresenteerd in een rechthoek die de (vormgevings)viewport wordt genoemd.
In Chrome op Android, vóór Chrome 135, wordt die indeling van het kijkvenster getekend tussen de bovenste statusbalk en de onderste navigatiebalk met gebaren. De aanwezigheid van de adresbalk van Chrome (of het ontbreken daarvan) kan de grootte van de viewport beïnvloeden, maar de viewport wordt nooit uitgebreid naar de bovenste systeembalk of de onderste navigatiebalk voor gebaren.
Vanaf Chrome 135 mag het kijkvenster worden uitgebreid naar de navigatiebalk voor navigatie met gebaren van Android. Dit is het gedrag dat wordt beschreven als van rand tot rand.
Chrome-gedrag zonder van rand tot rand
De volgende opname toont Chrome op Android zonder ondersteuning voor rand tot rand. De adresbalk van Chrome (bovenaan) verdwijnt dynamisch als de pagina wordt gescrold. De Android-native statusbalk bovenaan en de Android-native navigatiebalk onderaan blijven wel op hun plaats.
Hier verandert de grootte van de lay-outviewport als de adresbalk van Chrome wordt ingetrokken of uitgevouwen.
Chrome-gedrag met van rand tot rand
Vanaf Chrome 135 kan Chrome webcontent tot aan de onderrand van het apparaat tekenen door de viewport uit te breiden naar het gebied van de navigatiebalk voor gebaren.
Dynamisch van rand tot rand met de kin
Chrome toont standaard een nieuwe dynamische balk onderaan, de 'kin' genoemd, over het gebied van de navigatiebalk voor navigatie met gebaren. Net als de Chrome-adresbalk verdwijnt deze kin als je begint te scrollen en beïnvloedt deze de grootte van het kijkvenster.
In de volgende opname van Chrome op Android met ondersteuning voor van rand tot rand worden zowel de Chrome-adresbalk als de kin dynamisch ingetrokken als de pagina omlaag wordt gescrold. Hierdoor wordt het weergavegebied vergroot, zodat webcontent tot aan de onderrand van het apparaat kan worden getoond.
Dit gedrag van de kin is het nieuwe standaardgedrag van Chrome vanaf Chrome 135.
Standaard van rand tot rand met een opt-in
Websites die zijn gemaakt voor van rand tot rand, kunnen dit aangeven door de metatag viewport aan te passen. Als deze optie aanstaat, wordt de viewport standaard uitgebreid tot de onderrand zonder dat de kin ooit zichtbaar is.
Een pagina kan aangeven dat deze van rand tot rand ondersteunt met de metatag viewport en de sleutel viewport-fit.
Als je je wilt aanmelden voor van rand tot rand, stel je viewport-fit in op de waarde van cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Meer informatie over de verschillende waarden van viewport-fit op MDN.
Omgaan met content die misschien wordt geblokkeerd door de navigatiebalk voor navigatie met gebaren
In de modus van rand tot rand moet je rekening houden met content die misschien wordt geblokkeerd door de navigatiebalk voor gebaren.
In de meeste gevallen hoef je niets te doen, omdat de onderste kin vanzelf weggaat. Gebruikers kunnen nog steeds alle content op je website bereiken, net als voorheen.
Als je je aanmeldt voor standaard van rand tot rand of als je een element hebt dat onderaan de viewport is geplaatst, moet je er misschien rekening mee houden dat die content mogelijk wordt bedekt.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Als de kin aanwezig is, is de content in eerste instantie bereikbaar voor gebruikers, maar wordt deze geblokkeerd door de navigatiebalk van Android als de kin verdwijnt.
Gebruik de insets voor de veilige zone om de betreffende elementen altijd boven de Android-native navigatiebalk met gebaren onderaan te plaatsen of om de achtergrond uit te breiden naar dat gebied.
De insets voor de veilige zone
De insets voor de veilige zone zijn 4 omgevingsvariabelen die een rechthoek definiëren aan de hand van de boven-, rechter-, onder- en linkerinsets vanaf de rand van de viewport.
Samen vormen deze 4 waarden de rechthoek van het veilige gebied waarin je content kunt plaatsen zonder dat deze wordt geblokkeerd door bijvoorbeeld de Android-navigatiebalk voor gebaren.
De onderste inzet van de veilige zone gebruiken
Voor elementen die onderaan het kijkvenster zijn geplaatst, gebruikt u de safe-area-inset-bottom als de waarde voor de property bottom om te voorkomen dat deze onder de navigatiebalk voor gebaren wordt geplaatst. De waarde die wordt geretourneerd door safe-area-inset-bottom, wordt dynamisch geüpdatet als de kin uit de weg wordt gehaald. Hierdoor blijven de elementen onderaan netjes boven de navigatiebalk voor gebaren van Android staan.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom. Als de kin zichtbaar is, staat de balk boven de navigatiebalk voor gebaren van Android. Als de kin verdwijnt, staat het element er ook boven.Zoals je in de illustraties kunt zien, is het resultaat nog niet perfect: als de kin wordt weggehaald, wordt de resterende paginacontent zichtbaar in het gebied van de navigatiebalk voor gebaren. Dit komt omdat in deze status het kijkvenster zich uitstrekt tot in het gebied van de navigatiebalk voor navigatie met gebaren.
Een veelgebruikte aanpak om te voorkomen dat content onder onderaan verankerde content wordt weergegeven, is de padding-bottom in te stellen op de safe-area-inset-bottom. Op die manier wordt het onderaan verankerde element automatisch groter als de kin wordt verborgen. Hoewel dit werkt, raden we deze aanpak niet aan, omdat dit leidt tot layout thrashing terwijl de kin wordt verplaatst.
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); /* 🛑 Don't do this, as it causes layout thrashing. */
}
De onderste inzet van de veilige zone en de maximale onderste inzet van de veilige zone gebruiken
We raden u aan een combinatie van safe-area-inset-bottom en safe-area-max-inset-bottom te gebruiken. In tegenstelling tot de dynamische safe-area-inset-bottom, die dynamisch wordt geüpdatet als de kin uit de weg beweegt, 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 onderaan verankerde element aan de voorkant te laten groeien en combineer dit met safe-area-inset-bottom om het element omlaag 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 de prestaties zijn veel beter. Omdat alleen de berekende waarde voor bottom hoeft te veranderen als de kin wegbeweegt, vindt er geen layout thrashing plaats.
Van rand tot rand uitproberen vóór Chrome 135
Als je van rand tot rand wilt proberen voordat de functie openbaar wordt uitgebracht, moet je een aantal Chrome-functievlaggen aanzetten via chrome://flags:
EdgeToEdgeBottomChin(als je deze optie instelt op Foutopsporing aangezet, wordt de helft van de kin roze gekleurd om deze duidelijker te onderscheiden van andere UI)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(don't set to "Enabled" but set to "Enabled Dispatch yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(stel niet in op Enabled, maar op Enabled Scrollable Variation)
Zorg dat de volgende markeringen niet aanstaan:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Start Chrome 2 keer opnieuw op.
We zijn benieuwd naar je feedback
Als je feedback hebt over Chrome en de implementatie van van rand tot rand, neem je contact met ons op door een Chromium-bug in te dienen in de component UI > Browser > Mobile > EdgeToEdge. We stellen uw feedback zeer op prijs.