Deze pagina is vertaald door de Cloud Translation API.

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.

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.

Illustratie van het bovenste gedeelte van een Android-apparaat met de systeembalk gemarkeerd. — 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.

Illustratie van het onderste gedeelte van een Android-apparaat met de gebarennavigatiebalk zichtbaar. — 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.

Illustraties van een Android-apparaat met Chrome op Android dat niet van rand tot rand is. De afbeelding aan de linkerkant toont Chrome met de adresbalk uitgevouwen. Tussen de adresbalk en de gebarennavigatiebalk bevindt zich een groen gemarkeerd vak met een grootte van 100svh. De afbeelding rechts toont Chrome met de adresbalk ingetrokken. Tussen de statusbalk en de gebarennavigatiebalk bevindt zich een groen gemarkeerd vak met een grootte van 100lvh. Het kijkvenster zelf heeft een blauwe stippellijn. — 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 .

Illustraties van de viewport in Chrome op Android die niet van rand tot rand loopt (aan de linkerkant) en in Chrome op Android die van rand tot rand loopt (aan de rechterkant). Elke visualisatie heeft een blauw kader dat een element vertegenwoordigt met een hoogte van 100 vh. De tekst aan de linkerkant verduidelijkt wat er gebeurt als chroom niet van rand tot rand is. Er staat: 'De viewport blijft vastgeklemd tussen de bovenste statusbalk en de onderste gebarennavigatiebalk'. De tekst aan de rechterkant verduidelijkt wat er gebeurt als chroom van rand tot rand is. Er staat 'De viewport strekt zich uit tot in de gebarennavigatiebalk'. — 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.

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.

Illustraties van een Android-apparaat met Chrome op Android dat van rand tot rand is. De afbeelding links toont Chrome met de kin zichtbaar. De onderaan verankerde inhoud (weergegeven in rood) bevindt zich er precies bovenop. De afbeelding rechts toont Chrome waarbij de kin niet zichtbaar is. Daar zit de onderaan verankerde inhoud tegen de onderkant van het apparaat. De bijbehorende tekst verduidelijkt dat inhoud op de bodem nu wordt belemmerd door de gebarennavigatiebalk. — 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

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 een Android-apparaat met Chrome in edge-to-edge-modus. De kin heeft een uitschuifbaar zicht. In Chrome wordt de rechthoek van het veilige gebied weergegeven, geel geverfd. De onderkant bevindt zich net boven de gebarennavigatiebalk. Geschilderd in de gebarennavigatiebalk is het onderste deel van het venster, blauw geverfd. De bijbehorende tekst luidt dat de rechthoek van het veilige gebied in de viewport is ingevoegd door de inzet van het veilige gebied onder, waardoor wordt voorkomen dat inhoud onder de gebarennavigatiebalk wordt geschilderd. — 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);
}

Illustratie van een Android-apparaat met Chrome in edge-to-edge-modus. In de visualisatie aan de linkerkant is de Chin zichtbaar en zit de aan de onderkant verankerde inhoud er net boven. In de visualisatie rechts is de kin niet zichtbaar en is de aan de onderkant verankerde inhoud op dezelfde plaats gepositioneerd als links. Hierdoor is reguliere inhoud zichtbaar vanaf de onderkant van de gebarennavigatiebalk. — 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. */
}

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

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.