Guida alla migrazione edge-to-edge di Chrome su Android

Bramus

Data di pubblicazione: 28 febbraio 2025

Edge-to-edge è una funzionalità di Android che consente alle applicazioni di estendersi per tutta la larghezza e l'altezza del display disegnando dietro le barre di sistema Android.

Prima di Chrome 135, Chrome su Android non veniva visualizzato da bordo a bordo. Questa guida spiega l'effetto di questa modifica sui siti web e cosa puoi fare in qualità di sviluppatore per adottarla.

Bar ovunque

Android è dotato di barre di sistema fornite dal sistema operativo stesso.

La barra di stato, la barra del titolo e la barra di navigazione sono chiamate collettivamente barre di sistema. Mostrano informazioni importanti come il livello batteria, l'ora e gli avvisi di notifica e consentono l'interazione diretta con il dispositivo da qualsiasi luogo.

Nella parte superiore dello schermo si trova la barra di stato, che contiene le icone di notifica e di sistema.

Illustrazione della parte superiore di un dispositivo Android con la barra di sistema evidenziata.
La barra di stato su Android evidenziata (fonte).

Nella parte inferiore dello schermo si trova la barra di navigazione, che ti consente di controllare la navigazione utilizzando i controlli Indietro, Home e Panoramica. Può trattarsi della classica navigazione a tre pulsanti o della moderna barra di navigazione tramite gesti.

Illustrazione della parte inferiore di un dispositivo Android con la barra di navigazione tramite gesti visibile.
La barra di navigazione tramite gesti (fonte).

Oltre alle barre di sistema di Android, Chrome è dotato di una barra degli indirizzi che si espande e si ritrae dinamicamente durante lo scorrimento.

Chrome va da bordo a bordo

Quando visiti un sito web, questo viene visualizzato in un rettangolo noto come viewport (layout).

In Chrome su Android, prima di Chrome 135, la finestra visualizzazione del layout viene disegnata tra la barra di stato superiore e la barra di navigazione tramite gesti inferiore. La presenza (o l'assenza) della barra degli indirizzi di Chrome può influire sulle dimensioni della visualizzazione, ma quest'ultima non si espanderà mai nella barra di sistema superiore o nella barra di navigazione tramite gesti inferiore.

Illustrazioni di un dispositivo Android con Chrome su Android non edge-to-edge. L'illustrazione a sinistra mostra Chrome con la barra degli indirizzi espansa. Tra la barra degli indirizzi e la barra di navigazione tramite gesti si trova una casella evidenziata in verde di dimensioni 100 svh. L'illustrazione a destra mostra Chrome con la barra degli indirizzi ritratta. Tra la barra di stato e la barra di navigazione tramite gesti si trova un riquadro evidenziato in verde di dimensioni pari a 100 lvh. L'area visibile stessa ha un contorno blu tratteggiato.
Le dimensioni minime e massime del riquadro visibile in Chrome su Android prima di Chrome 135. Queste dimensioni sono note come viewport piccola e grande. L'area visibile stessa ha un contorno blu tratteggiato.

A partire da Chrome 135, l'area visibile può estendersi nella barra di navigazione tramite gesti di Android. Questo comportamento è descritto come edge-to-edge.

Illustrazioni della finestra di visualizzazione in Chrome su Android che non è da bordo a bordo (a sinistra) e in Chrome su Android che è da bordo a bordo (a destra). Ogni visualizzazione ha una casella blu che rappresenta un elemento dimensionato a un'altezza di 100 vh. Il testo a sinistra chiarisce cosa succede quando la cromatura non è da bordo a bordo. Il testo recita: "La finestra rimane bloccata tra la barra di stato superiore e la barra di navigazione tramite gesti inferiore". Il testo a destra chiarisce cosa succede quando Chrome è da bordo a bordo. Il testo recita "L'area visibile si estende nella barra di navigazione tramite gesti".
L'ampia area visibile mostrata in Chrome su Android che non è edge-to-edge (a sinistra) e in Chrome che è edge-to-edge (a destra). In Chrome con supporto edge-to-edge, la finestra visualizzabile si estende nell'area della barra di navigazione tramite gesti quando le barre degli strumenti dinamiche di Chrome vengono ritratte.

Comportamento di Chrome senza edge-to-edge

La seguente registrazione mostra Chrome su Android senza supporto edge-to-edge. La barra degli indirizzi di Chrome (in alto) si sposta dinamicamente mentre la pagina viene scorre. Tuttavia, la barra di stato nativa di Android in alto e la barra di navigazione nativa di Android in basso rimangono fisse.

Comportamento precedente: Chrome su Android senza supporto edge-to-edge e https://developer.chrome.com/ caricato.

In questo caso, le dimensioni della finestra visibile del layout cambiano quando la barra degli indirizzi di Chrome si ritrae o si espande.

Comportamento di Chrome con edge-to-edge

A partire da Chrome 135, Chrome può disegnare contenuti web fino al bordo inferiore del dispositivo estendendo la finestra visualizzabile nell'area della barra di navigazione tramite gesti.

Dynamic edge-to-edge con "il mento"

Per impostazione predefinita, Chrome edge-to-edge mostra una nuova barra inferiore dinamica chiamata "mento" sopra l'area della barra di navigazione tramite gesti. Proprio come la barra degli indirizzi di Chrome, questa barra si sposta mentre inizi a scorrere e influisce sulle dimensioni dell'area visibile.

Nella seguente registrazione di Chrome su Android con supporto edge-to-edge, sia la barra degli indirizzi di Chrome che la parte inferiore dello schermo si ritraggono dinamicamente man mano che la pagina scorre verso il basso. In questo modo, la visualizzazione viene espansa, consentendo di visualizzare i contenuti web fino al bordo inferiore del dispositivo.

Nuovo comportamento: Chrome su Android con supporto edge-to-edge e https://developer.chrome.com/ caricato. Nota come la parte inferiore del mento si sposta mentre la pagina scorre.

Questo comportamento del mento è il nuovo comportamento predefinito di Chrome a partire da Chrome 135.

Visualizzazione edge-to-edge per impostazione predefinita con attivazione

I siti web creati per la visualizzazione edge-to-edge possono indicarlo modificando il meta tag viewport. Se abilitata, la finestra verrà estesa fino al bordo inferiore per impostazione predefinita senza che la mentoniera sia mai visibile.

Nuovo comportamento con l'attivazione edge-to-edge: la finestra viene estesa fino al bordo inferiore al caricamento della pagina. Nessun mento presente.

Una pagina può indicare che supporta la visualizzazione edge-to-edge utilizzando il meta tag viewport e la relativa chiave viewport-fit.

Per attivare la visualizzazione edge-to-edge, imposta viewport-fit sul valore di cover.

<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /

Scopri di più sui vari valori di viewport-fit su MDN.

Gestire i contenuti che potrebbero essere ostruiti dalla barra di navigazione tramite gesti

In modalità da bordo a bordo, devi considerare i contenuti che potrebbero essere ostruiti dalla barra di navigazione tramite gesti.

Nella maggior parte dei casi, non dovrai fare nulla perché la parte inferiore del mento si sposta da sola. Gli utenti possono comunque accedere a tutti i contenuti del tuo sito web come facevano prima.

Tuttavia, se attivi la visualizzazione edge-to-edge per impostazione predefinita o se hai un elemento posizionato nella parte inferiore del riquadro, potresti dover tenere conto del fatto che i contenuti potrebbero essere coperti.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

Quando la mentoniera è presente, inizialmente gli utenti possono raggiungere i contenuti, ma questi vengono ostruiti dalla barra di navigazione di Android man mano che la mentoniera scompare.

Illustrazioni di un dispositivo Android con Chrome su Android in modalità edge-to-edge. L'illustrazione a sinistra mostra Chrome con la mentoniera visibile. I contenuti ancorati in basso (mostrati in rosso) si trovano appena sopra. L'illustrazione a destra mostra Chrome con la mentoniera non visibile. In questo caso, i contenuti ancorati in basso si trovano sul bordo inferiore del dispositivo. Il testo che lo accompagna chiarisce che i contenuti posizionati in basso sono ora ostruiti dalla barra di navigazione tramite gesti.
Illustrazione di un sito web con un elemento posizionato in basso con `bottom: 0`. Quando il mento è visibile, l'elemento posizionato in basso si trova sopra la barra di navigazione di Android. Quando il mento si allontana, l'elemento viene posizionato dietro la barra di navigazione di Android, che a quel punto lo oscura parzialmente.

Per risolvere il problema, utilizza gli spazi interni dell'area sicura per posizionare sempre gli elementi interessati sopra la barra di navigazione tramite gesti nativa di Android o per estendere il loro sfondo in quest'area.

I margini dell'area sicura

Gli inset dell'area sicura sono quattro variabili di ambiente che definiscono un rettangolo in base agli inset superiore, destro, inferiore e sinistro dal bordo del viewport.

Questi quattro valori combinati formano il rettangolo dell'area sicura in cui è sicuro posizionare i contenuti in modo che non vengano ostruiti da elementi come la barra di navigazione tramite gesti di Android.

Illustrazione di un dispositivo Android con Chrome in modalità da bordo a bordo. Il mento ha una visualizzazione estraibile. All'interno di Chrome viene mostrato il rettangolo dell'area sicura, colorato di giallo. Il bordo inferiore si trova appena sopra la barra di navigazione tramite gesti. Nella barra di navigazione tramite gesti è dipinta la parte inferiore del riquadro, in blu. Il testo che lo accompagna indica che il rettangolo dell'area sicura è inserito nella finestra di visualizzazione tramite safe-area-bottom-inset, che impedisce la visualizzazione dei contenuti sotto la barra di navigazione tramite gesti.
Illustrazione di Chrome in modalità edge-to-edge con il riquadro della finestra e l'area sicura colorati di giallo. Poiché il mento è retratto, l'insetto inferiore dell'area sicura impedisce al rettangolo dell'area sicura di raggiungere la barra di navigazione tramite gesti. Di conseguenza, vedi l'anteprima del riquadro di visualizzazione da sotto la barra di navigazione tramite gesti.

Utilizzo dell'inset inferiore dell'area sicura

Per gli elementi posizionati nella parte inferiore dell'area visibile, utilizza safe-area-inset-bottom come valore della proprietà bottom per evitare che vengano posizionati sotto la barra di navigazione tramite gesti. Il valore restituito da safe-area-inset-bottom viene aggiornato dinamicamente man mano che il mento si sposta, in modo che gli elementi posizionati in basso rimangano sopra la barra di navigazione tramite gesti di Android.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}
Illustrazione di un dispositivo Android con Chrome in modalità da bordo a bordo. Nella visualizzazione a sinistra è visibile il mento e i contenuti ancorati in basso si trovano appena sopra. Nella visualizzazione a destra il mento non è visibile e i contenuti ancorati in basso sono posizionati nello stesso punto di quelli a sinistra. In questo modo, i contenuti normali sono visibili da sotto la barra di navigazione tramite gesti.
Illustrazioni di un sito web con un elemento posizionato in basso che utilizza l'insetto dell'area sicura inferiore con la proprietà bottom. Quando il mento è visibile, la barra si trova sopra la barra di navigazione tramite gesti di Android. Quando il mento scompare, anche l'elemento si trova sopra.

Come puoi vedere nelle illustrazioni, il risultato non è ancora perfetto: quando il mento viene spostato, i contenuti rimanenti della pagina diventano visibili nell'area della barra di navigazione tramite gesti. Questo perché in questo stato l'area visibile si estende nell'area della barra di navigazione tramite gesti.

Per evitare che i contenuti vengano visualizzati sotto i contenuti ancorati in basso, un approccio di uso comune è impostare padding-bottom su safe-area-inset-bottom. In questo modo, l'elemento ancorato in basso cresce automaticamente man mano che il mento si nasconde. Sebbene funzioni, questo approccio non è consigliato perché comporta un layout thrashing mentre il mento si sposta.

Non impostare padding su un valore di inserimento dell'area sicura.

.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. */
}

Utilizzo dell'insetto inferiore dell'area sicura e dell'insetto inferiore massimo dell'area sicura

L'approccio consigliato è invece quello di utilizzare una combinazione di safe-area-inset-bottom e safe-area-max-inset-bottom. A differenza del safe-area-inset-bottom dinamico, che si aggiorna dinamicamente man mano che il mento si sposta, il safe-area-max-inset-bottom rappresenta il valore massimo del safe-area-inset-bottom.

Utilizza safe-area-max-inset-bottom per far crescere l'elemento ancorato in basso in primo piano e combinalo con safe-area-inset-bottom per tirare giù l'elemento in modo che si trovi dietro il mento.

Utilizza safe-area-max-inset-bottom in combinazione con 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));
}

Prova una demo dal vivo

Il risultato visivo è lo stesso dell'approccio padding-bottom: env(safe-area-inset-bottom, 0px);, ma le prestazioni sono molto migliori. Poiché deve cambiare solo il valore calcolato per bottom man mano che il mento si allontana, non si verifica alcun layout thrashing.

Illustrazione di un dispositivo Android con Chrome in modalità da bordo a bordo. Nella visualizzazione a sinistra è visibile il mento e i contenuti ancorati in basso si trovano appena sopra. Nella visualizzazione a destra, il mento non è visibile e i contenuti ancorati in basso sono cresciuti visivamente per occupare lo spazio in cui si trovava originariamente il mento. In questo modo si crea un piacevole effetto visivo e si impedisce che i normali contenuti della pagina diventino visibili da sotto l'area della barra di navigazione tramite gesti.
Illustrazioni di un sito web con un elemento ancorato in basso che tiene conto degli insetti dell'area sicura. Quando il mento è visibile (a sinistra), l'elemento si trova sopra il mento. Quando il mento non è visibile, l'elemento si fonde visivamente con la barra di navigazione tramite gesti di Android.

Prova la visualizzazione da bordo a bordo prima di Chrome 135

Per provare la visualizzazione da bordo a bordo prima del rilascio pubblico stabile, devi attivare diversi flag delle funzionalità di Chrome tramite chrome://flags:

  • EdgeToEdgeBottomChin (se vuoi, impostalo su "Enabled Debug" per colorare metà del mento di rosa e distinguerlo più chiaramente dalle altre UI)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (non impostare "Attivato", ma "Attivato invio yOffset")
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (non impostare su "Attivato", ma su "Attivato con scorrimento")

Assicurati che i seguenti flag non siano attivati:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

Riavvia Chrome due volte.

Vorremmo sapere cosa ne pensi

Se hai feedback su Chrome e sulla sua implementazione edge-to-edge, contattaci segnalando un bug di Chromium nel componente "UI > Browser > Mobile > EdgeToEdge". Apprezziamo il tuo feedback.