A novembre, con il rilascio di Chrome 108, Chrome apporterà alcune modifiche al comportamento dell'area visibile del layout quando viene visualizzata la tastiera sullo schermo. Con questa modifica, Chrome su Android non ridimensionerà più l'area visibile del layout, ma solo l'area visibile. In questo modo, il comportamento di Chrome su Android sarà allineato a quello di Chrome su iOS e Safari su iOS.
Qui puoi trovare alcune informazioni su ciò che sta accadendo, sul motivo per cui Chrome sta apportando questa modifica e su cosa puoi fare per prepararti.
Visualizzazione del layout e della visualizzazione visiva
Quando visiti un sito web, non riesci a vedere i contenuti dell'intera pagina dopo il caricamento. Il browser offre invece un viewport attraverso il quale puoi vedere una parte della pagina. Questa area visibile è anche nota come Area visibile del layout. Quando i contenuti di una pagina diventano troppo grandi, il browser offre un meccanismo di scorrimento.
Quando posizioni gli elementi utilizzando position: fixed, questi verranno posizionati nell'area visibile del layout. Poiché l'area visibile del layout rimane invariata quando scorri verso il basso una pagina, lo stesso vale per gli elementi che utilizzano position: fixed.
position: fixed (riquadri blu). Sono mostrati (da sinistra a destra) Safari su iPhone, Chrome su Android e Firefox su Android.
Oltre a questa area visibile del layout, il browser offre anche un'area visibile visiva. Rappresenta la parte del viewport attualmente visibile. Al livello di zoom 1, l'area visibile è grande quanto l'area visibile del layout.
Quando aumenti lo zoom con due dita, le dimensioni dell'area visibile diminuiscono rispetto a quelle dell'area visibile del layout.
Comportamento di ridimensionamento dell'area visibile
Quando è attivo un input o qualsiasi altra area modificabile, i dispositivi (principalmente dispositivi touchscreen) possono mostrare una tastiera sullo schermo. Questa tastiera, spesso chiamata tastiera virtuale,consente agli utenti di inserire contenuti nell'area modificabile.
In questo modo, i browser rispondono in uno dei seguenti modi in relazione ai vari viewport:
- Ridimensiona solo la visualizzazione visiva e applica l'offset all'area visibile del layout.
- Ridimensiona sia l'area visibile sia l'area visibile del layout.
- Non ridimensionare l'area visibile del layout o l'area di visualizzazione visiva sovrapponendo la tastiera virtuale a entrambe.
Questi tre comportamenti vengono visualizzati come segue:
A seconda della combinazione di browser e sistema operativo utilizzata da un visitatore, viene utilizzato uno dei comportamenti, al di fuori del tuo controllo.
Mappatura dei vari comportamenti di ridimensionamento
Nella parte Viewport Investigation Effort di Interop 2022, sono stati esaminati vari aspetti relativi all'area visibile, per ogni principale combinazione di browser e sistema operativo.
Uno degli aspetti testati è il comportamento di ridimensionamento quando viene visualizzata la tastiera sullo schermo. Ciò ha portato alla seguente classificazione:
Gruppo 1
Browser che ridimensionano l'area visibile, lasciando invariata l'area visibile del layout.
- Safari su iOS
- Safari su iPadOS
- Chrome su ChromeOS
- Chrome per iOS
- Chrome su iPadOS
- Edge su iOS
- Edge su iPadOS
Gruppo 2
Browser che ridimensionano sia l'area visibile sia l'area visibile del layout.
- Chrome su Android
- Firefox su Android
- Edge su Android
- Firefox su iOS
Gruppo tre
Browser che non ridimensionano nessuna area visibile:
- Nessuno per impostazione predefinita. In Chrome su Android puoi attivare questo comportamento tramite l'API VirtualKeyboard
Effetti collaterali di ogni comportamento
Questa differenza nel modo in cui le varie aree visibili vengono ridimensionate quando viene visualizzata la tastiera sullo schermo comporta un comportamento di layout e dimensionamento non interoperabile dei siti web.
Nei browser del gruppo 1, con l'OSK mostrato:
- I valori calcolati per le unità relative al viewport rimangono invariati.
- Gli elementi progettati per occupare l'intero spazio visivo mantengono le loro dimensioni.
- Gli elementi che utilizzano
position: fixedrimangono in posizione e possono essere oscurati dalla tastiera OSK.
Nei browser del gruppo 2, con l'OSK mostrato:
- I valori calcolati per le unità relative al viewport si riducono.
- Gli elementi progettati per occupare tutto lo spazio visivo vengono rimpiccioliti.
- Gli elementi che utilizzano
position: fixedpossono finire in un'altra parte del layout.
position: fixed (caselle blu). Sono mostrati Safari su iOS (a sinistra) e Chrome su Android (al centro e a destra).
A meno che non ricorri allo sniffing dello user agent o non ti affidi a uno scripting esteso, non puoi sapere quale comportamento viene utilizzato. Inoltre, non puoi modificare il comportamento, in quanto è determinato dalla combinazione di browser e sistema operativo da cui l'utente effettua la visita.
Modificare il comportamento predefinito in Chrome 108
A partire da Chrome 108, Chrome su Android modificherà il comportamento di ridimensionamento dell'area visibile in modo da non ridimensionare più l'area visibile del layout quando viene visualizzata la tastiera sullo schermo.
In questo modo, il comportamento di Chrome su Android sarà in linea con quello di Chrome su iOS, iPadOS, Windows e CrOS, Safari su iOS e iPadOS ed Edge su iOS, iPadOS e Windows.
Grazie a questa modifica, gli autori possono sapere quale comportamento verrà utilizzato, indipendentemente dal sistema operativo su cui è in esecuzione Chrome. Inoltre, consente unità relative al viewport stabili: la visualizzazione o la disattivazione della tastiera sullo schermo non influisce su queste unità.
Attivare un comportamento diverso
Se vuoi che il tuo sito web utilizzi il comportamento di ridimensionamento precedente alla versione 108, non preoccuparti. In Chrome 108 è disponibile anche un'estensione del meta tag viewport.
Tramite la chiave interactive-widget, puoi indicare a Chrome il comportamento di ridimensionamento che preferisci.
I valori accettati per interactive-widget sono:
resizes-visual: ridimensiona solo l'area visibile, ma non l'area visibile del layout.resizes-content: ridimensiona sia l'area visibile che l'area visibile del layout.overlays-content: non ridimensionare l'area visibile.
Per riattivare il comportamento "vecchio" di Chrome su Android, imposta il meta tag dell'area visibile su questo:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Se non includi interactive-widget nel metatag viewport, Chrome utilizzerà il comportamento predefinito, ovvero resizes-visual.
Visualizzate, le impostazioni hanno questo effetto sui vari viewport:
resizes-visual, resizes-content e overlays-content.
Puoi provare l'effetto di ciascun valore nel browser su questo sito web di dimostrazione.
Test e feedback
Prevediamo alcune piccole differenze rispetto ai siti esistenti, ma ci aspettiamo che non siano bloccanti, in quanto Chrome 108 su Android ora si comporterà in modo simile a Safari su iOS. Di conseguenza, i siti web che funzionano bene su Safari su iOS dovrebbero funzionare anche su Chrome 108 su Android.
Tuttavia, invitiamo gli autori dei siti web a testare attivamente i propri siti in Chrome 108, disponibile in versione beta dal 27 ottobre 2022. Fai attenzione in particolare agli elementi che utilizzano position: fixed e/o si basano sulle unità relative al viewport.
I feedback possono essere segnalati all'indirizzo crbug.com. Assicurati di includere "tastiera sullo schermo" nel titolo della segnalazione.