Chrome op Android edge-to-edge migratiegids,Chrome op Android edge-to-edge migratiegids,Chrome op Android edge-to-edge migratiegids,Chrome op Android edge-to-edge migratiegids

Bramus

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.

Opmerking: de wijziging in Chrome 135 is gericht op apparaten met een klein scherm. Chrome op Android dat op apparaten met een groot scherm draait, is momenteel uitgesloten en zal in een toekomstige Chrome-release worden aangepakt.

Opmerking: deze functie wordt uitgerold met behulp van een Chrome-variant . Daarom kunt u het in een eerdere versie van Chrome herkennen.

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.

De statusbalk op Android gemarkeerd ( bron ) .

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.

De gebarennavigatiebalk ( bron ).

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.

De minimale en maximale grootte van de viewport in Chrome op Android vóór Chrome 135. Deze formaten staan ​​bekend als de kleine en grote viewport. Het kijkvenster zelf heeft een blauwe stippellijn.

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

De grote viewport die in Chrome op Android wordt weergegeven, is niet van rand tot rand (links) en in Chrome is van rand tot rand (rechts). In Chrome met ondersteuning van rand tot rand strekt de viewport zich uit tot in het gebied van de gebarennavigatiebalk wanneer de dynamische werkbalken van Chrome zijn ingetrokken.

Opmerking: Chrome op iOS heeft edge-to-edge-ondersteuning toegevoegd met de release van iOS 11.3. De aanbevelingen in deze handleiding zijn ook van toepassing op Chrome op iOS.

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.

Oud gedrag: Chrome op Android zonder edge-to-edge ondersteuning en https://developer.chrome.com/ geladen.

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.

Nieuw gedrag: Chrome op Android met edge-to-edge ondersteuning en https://developer.chrome.com/ geladen. Merk op hoe de onderkin uit de weg glijdt terwijl de pagina scrollt.

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.

Nieuw gedrag met aanmelding van rand tot rand: de viewport strekt zich uit tot aan de onderkant wanneer de pagina wordt geladen. Er is geen kin aanwezig.

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.

Illustratie van een website met een onderaan gepositioneerd element met 'bottom: 0'. Wanneer de kin zichtbaar is, bevindt het onderste element zich boven de navigatiebalk van Android. Wanneer de kin is weggetrokken, wordt het element achter de navigatiebalk van Android geplaatst, waardoor het op dat punt gedeeltelijk wordt verborgen.

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

Browser Support

• 69
• 79
• 65
• 11

Source

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.

Illustratie van Chrome in de modus van rand tot rand, waarbij de viewport en de rechthoek voor het veilige gebied geel zijn geverfd. Omdat de kin is ingetrokken, voorkomt de inzet aan de onderkant van het veilige gebied dat de rechthoek van het veilige gebied in de gebarennavigatiebalk reikt. Als gevolg hiervan zie je het kijkvenster van onder de 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);
}

Illustraties van een website met een onderaan gepositioneerd element dat gebruikmaakt van het onderste veilige gebied met de 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); /* 🛑 Don't do this, as it causes layout thrashing. */
}

Belangrijk: Om prestatievermindering te voorkomen, schuift Chrome de kin niet weg terwijl u scrolt wanneer dit patroon wordt gedetecteerd.

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

Probeer een livedemo

Opmerking: de terugvalwaarde 36px voor safe-area-max-inset-bottom is gekozen om tegemoet te komen aan browsers die de safe-area-max-inset-bottom niet ondersteunen. Deze waarde is gekozen omdat Safari op iOS in de Single Tab-modus een maximale bodemverschuiving van 36px heeft in portretmodus.

Belangrijk: Chrome beschikt over code-optimalisaties (een zogenaamd snel pad ) wanneer het de calc(env(safe-area-inset-bottom, …) +/- …); patroon. Dankzij dit snelle pad kan de aan de onderkant verankerde inhoud op een performante manier met de kin meebewegen terwijl de kin uit de weg beweegt.

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.

Illustraties van een website met een aan de onderkant verankerd element dat rekening houdt met de veilige zones. Wanneer de kin zichtbaar is (links) zit het element boven de kin. Wanneer de kin niet zichtbaar is, loopt het element visueel over in de gebarennavigatiebalk van Android.

Let op: De maximale Safe Area-inzetstukken ( safe-area-max-inset-bottom en Friends) zijn verkrijgbaar vanaf Chrome 135.

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.