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 de gevolgen van deze wijziging zijn voor websites en wat je als ontwikkelaar kunt doen om deze wijziging te omarmen.
Bars overal
Android wordt geleverd met systeembalken die door het besturingssysteem zelf worden geleverd.
De statusbalk, de titelbalk en de navigatiebalk worden samen de systeembalken genoemd. Ze tonen belangrijke informatie, zoals het batterijniveau, de tijd en meldingswaarschuwingen, en bieden overal directe apparaatinteractie.
Bovenaan het scherm vind je de statusbalk met meldingsiconen en systeemiconen.
Onderaan het scherm vind je de navigatiebalk. Hiermee kun je navigeren met de bedieningselementen voor 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 als je scrollt.
Chrome loopt van rand tot rand
Als je een website bezoekt, wordt die website getoond in een rechthoek die bekendstaat als de viewport (indeling).
In Chrome op Android, vóór Chrome 135, wordt dat weergavevenster getekend tussen de bovenste statusbalk en de onderste navigatiebalk voor gebaren. De aanwezigheid van de adresbalk van Chrome (of het ontbreken ervan) kan van invloed zijn op de grootte van het kijkvenster, maar het kijkvenster wordt nooit uitgebreid naar de bovenste systeembalk of de onderste navigatie met gebarenbalk.
Vanaf Chrome 135 mag het kijkvenster zich uitstrekken tot in de navigatiebalk voor navigatie met gebaren van Android. Dit is het gedrag dat wordt beschreven als rand tot rand.
Chrome-gedrag zonder rand tot rand
De volgende opname toont Chrome op Android zonder ondersteuning van rand tot rand. De adresbalk van Chrome (bovenaan) wordt dynamisch uit de weg geschoven als er op de pagina wordt gescrold. De systeemeigen statusbalk bovenaan en de systeemeigen navigatiebalk onderaan blijven wel op hun plaats.
Hier verandert de grootte van het weergavevenster van de indeling als de adresbalk van Chrome wordt ingetrokken of uitgebreid.
Chrome-gedrag met rand tot rand
Vanaf Chrome 135 kan Chrome webcontent tot aan de onderrand van het apparaat tekenen door het kijkvenster uit te breiden naar het gebied van de navigatie met gebaren.
Dynamisch van rand tot rand met de kin
Standaard toont Chrome van rand tot rand een nieuwe dynamische balk onderaan, de zogenaamde kin, boven het gebied van de navigatie met gebaren. Net als de adresbalk van Chrome verdwijnt deze balk als je begint te scrollen en heeft dit invloed op de grootte van het kijkvenster.
In de volgende opname van Chrome op Android met ondersteuning van rand tot rand worden zowel de Chrome-adresbalk als de kin dynamisch ingetrokken als de pagina omlaag scrollt. Hierdoor wordt het kijkvenster uitgebreid en kan webcontent tot aan de onderrand van het apparaat worden getekend.
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 van rand tot rand zijn gemaakt, kunnen dit aangeven door de viewport-metatag aan te passen. Als dit aanstaat, wordt het kijkvenster standaard tot aan de onderrand uitgebreid zonder dat de kin ooit zichtbaar is.
Een pagina kan aangeven dat deze van rand tot rand wordt ondersteund met de viewport-metatag en de bijbehorende viewport-fit-sleutel.
Als je je wilt aanmelden voor van rand tot rand, stel je viewport-fit in op de waarde cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /
Meer informatie over de verschillende waarden van viewport-fit op MDN.
Omgaan met content die mogelijk wordt geblokkeerd door de navigatiebalk voor navigatie met gebaren
In de modus van rand tot rand moet je rekening houden met content die mogelijk wordt geblokkeerd door de navigatiebalk voor gebaren.
In de meeste gevallen hoef je niets te doen, omdat de onderste kin vanzelf uit de weg gaat. Gebruikers kunnen nog steeds alle content op uw website bereiken, net als voorheen.
Als je je standaard aanmeldt voor weergave van rand tot rand of als je een element hebt dat onderaan het kijkvenster is geplaatst, moet je er 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 het veilige gebied om dit probleem te beperken. Plaats de betreffende elementen altijd boven de systeemeigen navigatiebalk voor navigatie met gebaren onderaan in Android of laat de achtergrond van de elementen doorlopen in dat gebied.
De insets van de veilige zone
De insets voor het veilige gebied zijn 4 omgevingsvariabelen die een rechthoek definiëren door de boven-, rechter-, onder- en linkerinsets vanaf de rand van het kijkvenster.
Samen vormen deze 4 waarden het rechthoek van het veilige gebied waarin je content veilig kunt plaatsen, zodat deze niet wordt geblokkeerd door bijvoorbeeld de Android-navigatiebalk voor gebaren.
De onderste inzet van het veilige gebied gebruiken
Gebruik voor elementen die onderaan het kijkvenster zijn geplaatst de waarde safe-area-inset-bottom voor de property bottom om te voorkomen dat het element onder de navigatie met gebaren wordt geplaatst. De waarde die door safe-area-inset-bottom wordt geretourneerd, wordt dynamisch geüpdatet als de kin uit de weg beweegt. Hierdoor blijven de onderaan geplaatste elementen mooi boven de navigatie met gebaren van Android.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom. Als de kin zichtbaar is, bevindt de balk zich boven de navigatie met gebaren van Android. Als de kin verdwijnt, bevindt het element zich ook erboven.Zoals je in de illustraties kunt zien, is het resultaat nog niet perfect: als de kin uit de weg wordt gehaald, wordt de overige paginacontent zichtbaar in het gebied van de navigatiebalk voor gebaren. Dit komt doordat het kijkvenster in deze status doorloopt in het gebied van de navigatiebalk voor gebaren.
Een veelgebruikte aanpak om te voorkomen dat content onder content met een verankering onderaan wordt getekend, is door 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 zichzelf verbergt. Hoewel dit werkt, raden we deze aanpak niet aan omdat dit leidt tot layout thrashing terwijl de kin uit de weg beweegt.
Stel de padding niet in op een waarde voor een veilige zone.
.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. */
}
Gebruik de onderste inzet van het veilige gebied en de maximale onderste inzet van het veilige gebied.
We raden je 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 dit safe-area-max-inset-bottom om het onderaan verankerde element naar voren te laten groeien en combineer het 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 bij de aanpak padding-bottom: env(safe-area-inset-bottom, 0px);, maar de prestaties zijn veel beter. Omdat alleen de berekende waarde voor bottom hoeft te veranderen als de kin wegdraait, treedt er geen layout thrashing op.
Probeer rand-tot-rand vóór Chrome 135
Als je van rand tot rand wilt proberen voordat de functie openbaar en stabiel wordt uitgebracht, moet je een aantal Chrome-functie-flags aanzetten via chrome://flags:
EdgeToEdgeBottomChin(je kunt dit optioneel instellen op Foutopsporing aangezet. De helft van de kin wordt dan roze gekleurd om deze duidelijker te onderscheiden van andere UI)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(niet instellen op Aangezet, maar instellen op Aangezet met y-offset)DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(stel niet in op Aan, maar op Aan met scrollbare variant)
Zorg dat de volgende vlaggen 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 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.