A novembre, con il rilascio di Chrome 108, Chrome apporterà alcune modifiche al comportamento del viewport di layout quando viene visualizzata la tastiera sullo schermo (OSK). Con questa modifica, Chrome su Android non ridimensionerà più l'area visibile del layout, ma solo l'area visibile visiva. In questo modo, il comportamento di Chrome su Android sarà alla pari di quello di Chrome su iOS e Safari su iOS.
Ecco alcune informazioni su cosa sta succedendo, perché Chrome sta apportando questa modifica e cosa puoi fare per prepararti.
L'area visibile del layout e l'area visibile visiva
Quando visiti un sito web, non vedi l'intero contenuto della pagina dopo il caricamento. Il browser offre invece un'area visibile attraverso la quale puoi vedere una parte della pagina. Questa area visibile è nota anche 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 disposti in base alla viewport di layout. Poiché l'area visibile del layout rimane invariata quando scorri una pagina verso il basso, lo stesso vale per gli elementi che utilizzano position: fixed.
position: fixed (riquadri blu). 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 dell'area visibile che è attualmente visibile. Al livello di zoom 1, questa area visibile visiva è grande quanto l'area visibile del layout.
Quando aumenti lo zoom, riduci le dimensioni dell'area visibile visiva rispetto all'area visibile del layout.
Comportamento di ridimensionamento dell'area visibile
Quando si attiva un input o un'altra area modificabile, i dispositivi, soprattutto quelli con touchscreen, possono mostrare una tastiera sullo schermo. Questa tastiera, spesso chiamata tastiera virtuale,consente agli utenti di inserire contenuti nell'area modificabile.
In questo caso, i browser rispondono in uno dei seguenti modi in relazione alle varie aree visibili:
- Ridimensiona solo l'area visibile visiva e compensa l'area visibile del layout.
- Ridimensiona sia l'area visibile visiva sia l'area visibile del layout.
- Non ridimensionare l'area visibile del layout o l'area visibile, sovrapponendo la tastiera virtuale a entrambe.
Questi tre comportamenti sono 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
Nell'ambito del Viewport Investigation Effort, parte di Interop 2022, sono stati esaminati vari aspetti relativi alla visualizzazione per ogni combinazione di browser e sistema operativo principali.
Uno degli aspetti testati è il comportamento di ridimensionamento quando viene visualizzata la tastiera sullo schermo. Questo ha portato alla seguente classificazione:
Primo gruppo
Browser che ridimensionano l'area visibile visiva, 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 due
Browser che ridimensionano sia l'area visibile visiva sia l'area visibile del layout.
- Chrome su Android
- Firefox su Android
- Edge su Android
- Firefox su iOS
Terzo gruppo
Browser che non ridimensionano nessuna delle aree visibili:
- 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 mostrata la tastiera sullo schermo porta a un comportamento di layout e dimensionamento dei siti web non interoperabile.
Nei browser del gruppo 1, con la tastiera sullo schermo visualizzata:
- I valori calcolati per le unità relative all'area visibile rimangono invariati.
- Gli elementi progettati per occupare l'intero spazio visivo mantengono le loro dimensioni.
- Gli elementi che utilizzano
position: fixedrimangono nella loro posizione e possono essere oscurati dalla tastiera sullo schermo.
Nei browser del gruppo 2, con la tastiera sullo schermo visualizzata:
- I valori calcolati per le unità relative all'area visibile si riducono.
- Gli elementi progettati per occupare l'intero spazio visivo si rimpiccioliscono.
- Gli elementi che utilizzano
position: fixedpossono finire altrove nel layout.
position: fixed (riquadri blu). Sono mostrati Safari su iOS (a sinistra) e Chrome su Android (al centro e a destra).
A meno che non utilizzi lo sniffing dello user agent o non ti affidi a script estesi, non puoi sapere quale comportamento viene utilizzato. Inoltre, non puoi modificare il comportamento, poiché è determinato dalla combinazione di browser e sistema operativo da cui l'utente sta visitando il sito.
Modifica del 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 verrà allineato a 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 di utilizzare unità relative all'area visibile stabili: la visualizzazione o l'occultamento della tastiera sullo schermo non influisce su queste unità.
Attivazione di 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 il tasto 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, non l'area visibile del layout.resizes-content: ridimensiona sia l'area visibile visiva sia l'area visibile del layout.overlays-content: non ridimensionare nessuna area visibile.
Per riattivare il "vecchio" comportamento di Chrome su Android, imposta il meta tag viewport come segue:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=r>esizes-content"
Se non includi interactive-widget nel meta tag viewport, Chrome utilizzerà il comportamento predefinito, ovvero resizes-visual.
In pratica, le impostazioni hanno questo effetto sulle varie aree visibili:
resizes-visual, resizes-content e overlays-content.
Puoi provare l'effetto di ogni valore nel browser su questo sito web dimostrativo.
Test e feedback
Prevediamo alcune piccole differenze rispetto ai siti esistenti, ma non dovrebbero essere bloccanti, poiché Chrome 108 su Android ora si comporterà in modo simile a Safari su iOS. Pertanto, i siti web che funzionano correttamente su Safari su iOS dovrebbero funzionare correttamente anche su Chrome 108 su Android.
Tuttavia, invitiamo gli autori di siti web a testare attivamente i propri siti web in Chrome 108, che è in versione beta dal 27 ottobre 2022. In particolare, cerca gli elementi che utilizzano position: fixed e/o si basano su unità relative alla viewport.
Il feedback può essere segnalato all'indirizzo crbug.com. Assicurati di includere "tastiera sullo schermo" nel titolo della segnalazione.