Data di pubblicazione: 28 febbraio 2025
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 edge-to-edge. Questa guida spiega l'effetto di questa modifica sui siti web e cosa puoi fare in qualità di sviluppatore per adottarla.
Bar ovunque
Android include barre di sistema fornite dal sistema operativo stesso.
La barra di stato, la barra dei sottotitoli e la barra di navigazione sono chiamate 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 puoi trovare la barra di stato, che contiene le icone di notifica e di sistema.
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 versione classica di navigazione con tre pulsanti o della moderna barra di navigazione tramite gesti.
Oltre alle barre di sistema di Android, Chrome include 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 area visibile (layout).
In Chrome su Android, prima di Chrome 135, l'area visibile del layout viene disegnata tra la barra di stato in alto e la barra di navigazione tramite gesti in basso. La presenza della barra degli indirizzi di Chrome (o la sua assenza) può influire sulle dimensioni dell'area visibile, ma quest'ultima non si espanderà mai nella barra di sistema in alto o nella barra di navigazione tramite gesti in basso.
A partire da Chrome 135, l'area visibile può estendersi nella barra di navigazione tramite gesti di Android. Questo è il comportamento descritto come edge-to-edge.
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 quando si scorre la pagina. Tuttavia, la barra di stato superiore nativa di Android e la barra di navigazione nativa di Android in basso rimangono fisse.
In questo caso, le dimensioni dell'area visibile del layout cambiano man mano che la barra degli indirizzi di Chrome si ritrae o si espande.
Comportamento di Chrome con la modalità edge-to-edge
A partire da Chrome 135, Chrome può disegnare i contenuti web fino al bordo inferiore del dispositivo estendendo l'area visibile nell'area della barra di navigazione tramite gesti.
Edge-to-edge dinamico con "il mento"
Per impostazione predefinita, Chrome edge-to-edge mostra una nuova barra dinamica in basso, nota come "chin", sopra l'area della barra di navigazione tramite gesti. Proprio come la barra degli indirizzi di Chrome, questa sezione si sposta quando 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 sia la barra inferiore si ritraggono 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.
Questo comportamento della barra inferiore è 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 questa opzione è attiva, l'area visibile si estenderà fino al bordo inferiore per impostazione predefinita, senza che il mento sia mai visibile.
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 modalità 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 tramite gesti
In modalità edge-to-edge, devi considerare tutti 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 accedere a tutti i contenuti del tuo sito web come prima.
Tuttavia, se attivi la visualizzazione edge-to-edge per impostazione predefinita o se hai un elemento posizionato nella parte inferiore dell'area visibile, potresti dover tenere conto del fatto che i 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.
Per mitigare il problema, utilizza gli inserti dell'area sicura per posizionare sempre gli elementi interessati sopra la barra di navigazione tramite gesti in basso nativa di Android o per estendere lo sfondo in quell'area.
Gli inserti dell'area di sicurezza
Gli inset dell'area sicura sono quattro variabili di ambiente che definiscono un rettangolo in base ai suoi inset superiore, destro, inferiore e sinistro dal bordo della finestra visibile.
Insieme, questi quattro valori 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.
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 chin 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);
}
bottom. Quando il mento è visibile, la barra si trova sopra la barra di navigazione tramite gesti di Android. Quando il mento scompare, l'elemento si trova anche sopra di esso.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 consiste nell'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 questo approccio funzioni, non è consigliato perché comporta un thrashing del layout mentre il chin si sposta.
Non impostare padding su un valore safe-area-inset.
.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'inset inferiore dell'area protetta e dell'inset massimo inferiore dell'area protetta
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 questo safe-area-max-inset-bottom per far crescere l'elemento ancorato in basso in primo piano e combinalo con safe-area-inset-bottom per spostare l'elemento verso il basso 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));
}
Il risultato visivo è lo stesso dell'approccio padding-bottom: env(safe-area-inset-bottom, 0px);, ma le prestazioni sono molto migliori. Poiché solo il valore calcolato per bottom deve cambiare quando il mento si allontana, non si verifica alcun layout thrashing.
Prova la modalità edge-to-edge prima di Chrome 135
Per provare la modalità edge-to-edge prima della sua release stabile pubblica, devi attivare alcuni flag di funzionalità di Chrome tramite chrome://flags:
EdgeToEdgeBottomChin(facoltativamente, impostalo su "Enabled Debug" per colorare metà del mento di rosa e distinguerlo più chiaramente dalle altre UI)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(non impostare su "Attivato", ma su "Attivato Dispatch yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(non impostare su "Attivato", ma su "Attivato con variazione scorrevole")
Assicurati che i seguenti flag non siano abilitati:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
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.