Il comportamento di ridimensionamento della barra degli URL cambierà in Chrome su Android a partire dalla versione 56. Ecco ciò che devi sapere:
Le lunghezze definite nelle unità dell'area visibile (ad es. vh) non verranno ridimensionate in risposta alla visualizzazione o alla occultamento della barra dell'URL. Le unità vh verranno invece ridimensionate
in base all'altezza dell'area visibile, come se la barra degli URL fosse sempre nascosta. In altre parole, vh unità verranno
ridimensionate in base all'"area visibile più grande possibile". Ciò significa che 100vh sarà maggiore dell'altezza visibile quando viene mostrata la barra degli URL.
Il blocco contenitore iniziale (ICB) è il blocco contenente la radice utilizzato durante il dimensionamento degli elementi rispetto ai rispettivi elementi padre. Ad esempio, se assegni all'elemento <html> uno stile width: 100%; height: 100%, questo avrà le stesse dimensioni dell'ICB. In seguito a questa modifica, l'ICB non verrà ridimensionato quando la barra degli URL viene nascosta.
Invece, rimarrà la stessa altezza, come se la barra degli URL fosse sempre visibile ("area visibile più piccola"). Ciò significa che un Elemento con dimensioni corrispondenti all'altezza ICB
non riempirà completamente l'altezza visibile mentre la barra dell'URL è nascosta.
Esiste un'eccezione alle modifiche precedenti, vale a dire per gli elementi position: fixed. Il loro comportamento rimane invariato. In altre parole, un elemento position:
fixed il cui blocco contenitore è l'ICB verrà ridimensionato in risposta alla visualizzazione o all'occultamento della barra degli URL. Ad esempio, se la sua altezza è 100%, riempirà sempre
esattamente l'altezza visibile, indipendentemente dal fatto che la barra dell'URL venga visualizzata o meno. Analogamente, per le lunghezze vh, verranno ridimensionate in base all'altezza visibile tenendo conto della posizione della barra degli URL.
Ecco alcuni motivi:
Unità
vhutilizzabili su dispositivo mobile. In precedenza, l'utilizzo delle unitàvhcomportava l'adattamento dinamico del contenuto della pagina ogni volta che l'utente cambiava la direzione di scorrimento.Esperienza utente migliorata. Se si ripete il flusso di una pagina durante la lettura, l'utente potrebbe perdere la posizione relativa nel documento. Ciò è frustrante, ma comporta anche l'utilizzo aggiuntivo del processore e il consumo della batteria per il relayout e il colore della pagina.
Interoperabilità con Safari su iOS migliorata. Il nuovo modello dovrebbe adattarsi al comportamento di Safari, per rendere la vita più semplice agli sviluppatori web. La scelta non intuitiva di rendere le unità
vhla più grande area visibile possibile, ma l'ICB la più piccola possibile, è quella di adeguarsi al comportamento di Safari.
Per gli scenari a schermo intero, in cui la barra dell'URL è bloccata in uno stato nascosto, ICB utilizzerà l'altezza a schermo intero. Questo è coerente con le definizioni precedenti, poiché "l'area visibile più piccola possibile" sarà l'area visibile completa in quanto la barra dell'URL non viene mostrata con lo scorrimento.
Demo
- Ecco una dimostrazione.
Le quattro barre sulla destra nella pagina rappresentano tutte le possibili combinazioni di
99%,99vh,position:fixedeposition:absolute, fornite in una pagina scorrevole. Nascondendo la barra degli URL viene mostrato come influisce su ciascuno di essi. Gli eventi di ridimensionamento vengono stampati in basso nella pagina.
Assistenza
- Chrome 56 su Android.