Il comportamento di ridimensionamento della barra degli URL sta cambiando in Chrome su Android a partire dalla versione 56. Ecco ciò che devi sapere:
Le lunghezze definite in unità di visualizzazione (ad es. vh) non verranno ridimensionate in risposta alla visualizzazione o all'occultamento della barra degli URL. Le unità vh verranno invece dimensionate in base all'altezza dell'area visibile, come se la barra degli URL fosse sempre nascosta. In altre parole, le unità vh verranno impostate in base alla "visualizzazione più grande possibile". Ciò significa che 100vh sarà maggiore
dell'altezza visibile quando viene visualizzata la barra degli URL.
Il blocco contenitore iniziale (ICB) è il blocco contenitore principale utilizzato per impostare le dimensioni degli elementi rispetto ai relativi elementi principali. Ad esempio, se assegni all'elemento <html>
uno stile width: 100%; height: 100%, le sue dimensioni saranno uguali a quelle
dell'ICB. Con questa modifica, la barra di controllo ICB non cambierà le dimensioni quando la barra degli URL è nascosta.
Rimarrà invece della stessa altezza, come se la barra degli URL fosse sempre visibile
("viewport più piccolo possibile"). Ciò significa che un elemento dimensionato in base all'altezza della barra di controllo dell'interfaccia utente
non riempirà completamente l'altezza visibile quando la barra degli URL è nascosta.
Esiste un'eccezione alle modifiche precedenti, ovvero per gli elementi
position: fixed. Il loro comportamento rimane invariato. In altre parole, un elemento position:
fixed il cui blocco contenitore è l'ICB cambierà dimensione in base alla visualizzazione o all'occultamento della barra degli URL. Ad esempio, se l'altezza è 100%, verrà sempre riempita esattamente l'altezza visibile, indipendentemente dal fatto che la barra degli URL sia visibile o meno. Analogamente, per le lunghezzevh, il ridimensionamento verrà effettuato in base all'altezza visibile tenendo conto della posizione della barra URL.
Ecco alcuni dei motivi di questa modifica:
vhunità utilizzabili sui dispositivi mobili. In precedenza, l'utilizzo di unitàvhsignificava che una pagina veniva riorganizzata in modo spiacevole ogni volta che l'utente cambiava direzione scorrimento.Esperienza utente migliorata. Se una pagina viene riorganizzata mentre l'utente legge, potrebbe perdere la sua posizione relativa nel documento. Questo è frustrante, ma comporta anche un maggiore utilizzo del processore e un maggiore consumo della batteria per il nuovo layout e la nuova colorazione della pagina.
Interoperabilità migliorata con Safari su iOS. Il nuovo modello deve corrispondere al comportamento di Safari, semplificando la vita degli sviluppatori web. La scelta non intuitiva di impostare le unità
vhcome viewport più grande possibile, ma l'ICB come minimo possibile, è volta ad adeguarsi al comportamento di Safari.
Per gli scenari a schermo intero, in cui la barra degli URL è bloccata in uno stato nascosto, la ICB utilizzerà l'altezza dello schermo intero. Questo è coerente con le definizioni di cui sopra, poiché "area visibile più piccola possibile" sarà l'area visibile completa poiché la barra dell'URL non viene visualizzata durante lo scorrimento.
Demo
- Ecco una demonstrazione.
Le quattro barre a destra della pagina sono tutte le combinazioni possibili di
99%,99vh,position:fixedeposition:absolutefornite in una pagina scorrevole. Nascondere la barra degli URL mostra in che modo influisce su ciascuna. Gli eventi di ridimensionamento vengono stampati nella parte inferiore della pagina.
Assistenza
- Chrome 56 su Android.