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 in unità area visibile (ad es. vh) non verranno ridimensionate in risposta alla barra dell'URL mostrata o nascosta. Le unità vh verranno ridimensionate in base
all'altezza dell'area visibile come se la barra dell'URL fosse sempre nascosta. In altre parole, vh unità verranno ridimensionate in base all'"area visibile più grande possibile". Ciò significa che 100vh sarà superiore
all'altezza visibile quando viene mostrata la barra dell'URL.
L'ICB (Initial Containing Block) è il blocco contenente la radice utilizzata per il dimensionamento degli elementi rispetto agli elementi padre. Ad esempio, se assegni all'elemento <html>
uno stile di width: 100%; height: 100%, verranno applicate le stesse dimensioni
dell'ICB. Con questa modifica, l'ICB non verrà ridimensionato quando la barra dell'URL è nascosta.
Rimarrà invece la stessa altezza, come se la barra dell'URL fosse sempre visualizzata
("l'area visibile più piccola possibile"). Ciò significa che un elemento con dimensioni pari all'altezza ICB
non riempirà completamente l'altezza visibile mentre la barra dell'URL è nascosta.
C'è un'eccezione alle modifiche precedenti per gli elementi che sono
position: fixed. Il loro comportamento rimane invariato. In altre parole, un elemento position:
fixed il cui blocco contenitore è ICB verrà ridimensionato in risposta alla visualizzazione o all'occultamento della barra dell'URL. Ad esempio, se la sua altezza è 100%, riempirà sempre esattamente
l'altezza visibile, indipendentemente dal fatto che la barra dell'URL venga mostrata o meno. Allo stesso modo, per
vh lunghezze, verranno ridimensionate in base all'altezza visibile tenendo conto della posizione
della barra dell'URL.
Ecco alcuni motivi alla base di questo cambiamento:
Unità
vhutilizzabili sui dispositivi mobili. In precedenza, l'utilizzo delle unitàvhsignificava che una pagina si adattava in modo anomalo ogni volta che l'utente cambiava la direzione di scorrimento.Esperienza utente migliorata. Se una pagina si ripete durante la lettura, l'utente potrebbe perdere la posizione relativa nel documento. Questo è frustrante, ma richiede anche un maggiore utilizzo del processore e un consumo della batteria maggiore per il relayout e la nuova colorazione della pagina.
Interoperabilità migliorata con Safari su iOS. Il nuovo modello dovrebbe adattarsi al comportamento di Safari, semplificando così la vita agli sviluppatori web. La scelta poco intuitiva di rendere le unità
vhl'area visibile più grande possibile, ma la dimensione minima dell'ICB possibile è quella di adattarsi al comportamento di Safari.
Per scenari a schermo intero, in cui la barra dell'URL è bloccata su uno stato nascosto, l'ICB utilizzerà l'altezza a schermo intero. Ciò è coerente con le definizioni riportate sopra, poiché l'"area visibile più piccola possibile" sarà l'area visibile completa, in quanto la barra dell'URL non viene visualizzata quando si scorre.
Demo
- Ecco una dimostrazione.
Le quattro barre a destra della pagina sono tutte combinazioni possibili di
99%,99vh,position:fixedeposition:absolutefornite in una pagina scorrevole. Nascondendo la barra dell'URL, vedrai come influisce su ogni barra. Gli eventi di ridimensionamento vengono stampati nella pagina.
Assistenza
- Chrome 56 su Android.