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

Bramus

Data di pubblicazione: 28 febbraio 2025

La modalità edge-to-edge è una funzionalità di Android che consente alle applicazioni di occupare l'intera larghezza e altezza del display disegnando dietro le barre di sistema di Android.

Prima di Chrome 135, Chrome su Android non disegnava da un'estremità all'altra. Questa guida spiega l'effetto di questa modifica sui siti web e cosa puoi fare in qualità di sviluppatore per adottarla.

Nota: la modifica in Chrome 135 ha come target i dispositivi con schermo di piccole dimensioni. Chrome su Android in esecuzione su dispositivi con schermi di grandi dimensioni è attualmente escluso e verrà affrontato in una release futura di Chrome.

Nota: questa funzionalità è in fase di implementazione utilizzando una variazione di Chrome. Pertanto, potresti trovarlo in una versione precedente di Chrome.

Bar ovunque

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

La barra di stato, la barra delle scritte e la barra di navigazione sono chiamate barre di sistema. Questi mostrano informazioni importanti come il livello della batteria, l'ora e gli avvisi di notifica e consentono di interagire direttamente 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.

La barra di stato su Android evidenziata (source).

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

La barra di navigazione tramite gesti (source).

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

Chrome diventa edge-to-edge

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

In Chrome su Android, prima di Chrome 135, l'area visibile del layout veniva disegnata tra la barra di stato in alto e la barra di navigazione dei gesti in basso. La presenza (o l'assenza) della barra degli indirizzi di Chrome può influire sulle dimensioni dell'area visibile, ma quest'ultima non si espanderà mai nella barra di sistema superiore o nella barra di navigazione dei gesti in basso.

Le dimensioni minime e massime della visualizzazione in Chrome su Android precedenti a Chrome 135. Queste dimensioni sono note come visualizzazione in miniatura e visualizzazione grande. L'area visibile stessa ha un contorno blu tratteggiati.

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

La visualizzazione ingrandita mostrata in Chrome su Android non è edge-to-edge (a sinistra) e in Chrome è edge-to-edge (a destra). In Chrome con il supporto del display edge-to-edge, la visualizzazione si estende nell'area della barra di navigazione dei gesti quando le barre degli strumenti dinamiche di Chrome sono retratte.

Nota: Chrome su iOS ha aggiunto il supporto per lo schermo intero con il rilascio di iOS 11.3. I consigli riportati in questa guida valgono anche per Chrome su iOS.

Comportamento di Chrome senza visualizzazione edge-to-edge

La registrazione seguente mostra Chrome su Android senza il supporto del riquadro a tutto schermo. La barra degli indirizzi di Chrome (in alto) si sposta dinamicamente mentre si scorre la pagina. Tuttavia, la barra di stato in alto e la barra di navigazione in basso native di Android rimangono fisse.

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

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

Comportamento di Chrome con il riquadro edge-to-edge

A partire da Chrome 135, Chrome può disegnare i contenuti web fino al bordo inferiore del dispositivo estendendo il viewport nell'area della barra di navigazione dei gesti.

Dinamico da un lato all'altro con "il mento"

Per impostazione predefinita, Chrome a schermo intero mostra una nuova barra inferiore dinamica nota come "mento" sopra l'area della barra di navigazione con i gesti. Proprio come la barra degli indirizzi di Chrome, questa barra si sposta non appena inizi a scorrere e influisce sulle dimensioni dell'area visibile.

Nella seguente registrazione di Chrome su Android con il supporto del display edge-to-edge, sia la barra degli indirizzi di Chrome che il mento si retraggono dinamicamente quando la pagina scorre verso il basso. In questo modo, l'area visibile si espande, 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 il mento inferiore scompare man mano che la pagina scorre.

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

Passare al formato edge-to-edge per impostazione predefinita con un'attivazione

I siti web creati per l'esperienza edge-to-edge possono indicarlo modificando il meta tag viewport. Se questa opzione è attiva, per impostazione predefinita la visualizzazione si estenderà fino al bordo inferiore senza che il mento sia visibile.

Nuovo comportamento con attivazione dell'area visibile edge-to-edge: l'area visibile si estende fino al bordo inferiore al caricamento della pagina. Non è presente il mento.

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

Per attivare il formato edge-to-edge, imposta viewport-fit sul valore di cover.

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

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

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

In modalità edge-to-edge, devi considerare i contenuti che potrebbero essere ostruiti dalla barra di navigazione tramite gesti.

Nella maggior parte dei casi, non dovrai fare nulla perché il mento inferiore si sposta da solo. Gli utenti possono comunque raggiungere tutti i contenuti del tuo sito web come prima.

Tuttavia, se attivi la visualizzazione a schermo intero per impostazione predefinita o hai un elemento posizionato nella parte inferiore dell'area visibile, potresti dover tenere conto del fatto che questi contenuti potrebbero essere coperti.

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

Quando il mento è presente, i contenuti saranno inizialmente raggiungibili dagli utenti, ma verranno ostruiti dalla barra di navigazione di Android quando il mento scompare.

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 lo oscura parzialmente in quel punto.

Per ridurre il problema, utilizza gli inserti di area di sicurezza per posizionare sempre gli elementi interessati sopra la barra di navigazione dei gesti in basso nativa di Android o per estendere lo sfondo in quell'area.

Le rientranze dell'area sicura

Browser Support

• 69
• 79
• 65
• 11

Source

Gli incassi dell'area di sicurezza sono quattro variabili di ambiente che definiscono un rettangolo in base agli incassi superiore, destro, inferiore e sinistro dal bordo dell'area visibile.

Combinati insieme, questi quattro valori formano il rettangolo dell'area di sicurezza in cui è possibile posizionare i contenuti in modo che non vengano ostruiti da elementi come la barra di navigazione con gesti di Android.

Illustrazione di Chrome in modalità edge-to-edge con la visualizzazione e il rettangolo dell'area di sicurezza colorati in giallo. Poiché il mento è retratto, l'insetto inferiore dell'area di sicurezza impedisce che il rettangolo dell'area di sicurezza raggiunga la barra di navigazione dei gesti. Di conseguenza, vedrai l'anteprima del viewport sotto la barra di navigazione tramite gesti.

Utilizzo dell'insetto inferiore dell'area di sicurezza

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

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

Illustrazioni di un sito web con un elemento posizionato in basso che utilizza l'area di sicurezza inferiore rientrata con la proprietà bottom. Quando il mento è visibile, la barra si trova sopra la barra di navigazione con i gesti di Android. Quando il mento scompare, l'elemento si trova anche 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 dei gesti. Questo perché in questo stato l'area visibile si estende nell'area della barra di navigazione dei gesti.

Per evitare che i contenuti vengano visualizzati sotto i contenuti ancorati in basso, un approccio comunemente utilizzato è impostare padding-bottom su safe-area-inset-bottom. In questo modo, l'elemento ancorato in basso aumenta automaticamente man mano che il mento si nasconde. Anche se funziona, questo approccio non è consigliato in quanto comporta un thrashing del layout mentre il mento si sposta.

Non impostare padding su un valore di inserto area di sicurezza.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

Importante: per evitare regressioni del rendimento, Chrome non scorrerà il cursore quando rileva questo comportamento.

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

L'approccio consigliato è invece 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 quando 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 aumentare l'elemento ancorato in basso in primo piano e combinalo con safe-area-inset-bottom per tirare l'elemento verso il basso in modo che si trovi dietro il mento.

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

Provare una demo dal vivo

Nota: il valore di riserva 36px per safe-area-max-inset-bottom è scelto per soddisfare i browser che non supportano safe-area-max-inset-bottom. Il valore è stato scelto perché Safari su iOS in modalità a scheda singola ha un offset massimo inferiore di 36px in modalità Ritratto.

Importante: Chrome applica ottimizzazioni del codice, un cosiddetto percorso rapido, quando rileva il pattern calc(env(safe-area-inset-bottom, …) +/- …);. Questo percorso rapido consente ai contenuti ancorati in basso di muoversi con il mento in modo efficiente quando il mento si sposta.

Il risultato visivo è lo stesso dell'approccio padding-bottom: env(safe-area-inset-bottom, 0px);, ma il rendimento è molto migliore. Poiché solo il valore calcolato per bottom deve cambiare quando il mento si allontana, non si verifica alcun ribaltamento del layout.

Illustrazioni di un sito web con un elemento ancorato in basso che prende in considerazione gli inserti dell'area di sicurezza. 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.

Nota: gli inserimenti dell'area di sicurezza massima (safe-area-max-inset-bottom e amici) sono disponibili da Chrome 135.

Provare la visualizzazione a tutto schermo prima di Chrome 135

Per provare la visualizzazione a tutto schermo prima della sua release stabile pubblica, devi attivare diversi flag di funzionalità di Chrome tramite chrome://flags:

• EdgeToEdgeBottomChin (se lo imposti su "Debug abilitato", metà del mento verrà colorata di rosa per distinguerlo più chiaramente dall'altra UI)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor (non impostare su "Attivato", ma su "Attivato Dispatch yOffset")
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint (non impostare su "Attivata", ma su "Variazione scorrevole attivata")

Assicurati che i seguenti flag non siano abilitati:

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

Riavvia Chrome due volte.

Vorremmo sapere cosa ne pensi

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