A novembre, con il rilascio della versione 108, Chrome apporterà alcune modifiche al comportamento della visualizzazione del layout quando viene mostrata la tastiera sullo schermo (OSK). In seguito a questa modifica, Chrome su Android non ridimensionerà più la visualizzazione del layout, ma solo quella. In questo modo il comportamento di Chrome su Android sarà allo stesso livello di quello di Chrome su iOS e di Safari su iOS.
Ecco alcune informazioni di base su cosa sta succedendo, sui motivi per cui Chrome sta apportando questa modifica e su cosa puoi fare per prepararti.
L'area visibile del layout e la visualizzazione visiva
Quando visiti un sito web, non riesci a visualizzare i contenuti dell'intera pagina una volta caricata. Il browser ti offre invece un'area visibile tramite la quale puoi vedere una parte della pagina. Questa area visibile è nota anche come viewport di layout. Quando i contenuti di una pagina aumentano troppo, il browser offre un meccanismo di scorrimento.
Quando posizioni gli elementi utilizzando position: fixed, questi vengono disposti in base all'area visibile del layout. La visualizzazione del layout rimane attiva mentre scorri la pagina verso il basso, così come gli elementi che utilizzano position: fixed.
position: fixed (contorni blu). Sono mostrati (da sinistra a destra) Safari su iPhone, Chrome su Android e Firefox su Android.
Oltre a questa visualizzazione del layout, il browser offre anche una visualizzazione visiva. Rappresenta la parte dell'area visibile attualmente visibile. A livello di zoom 1, questa visualizzazione visiva è grande quanto la visualizzazione del layout.
Quando pizzichi aumentando lo zoom, riduci le dimensioni della visualizzazione visiva rispetto a quella del layout.
Comportamento di ridimensionamento dell'area visibile
Quando imposti lo stato attivo per 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.
Durante questa operazione, i browser rispondono in uno dei seguenti modi in relazione alle varie aree visibili:
- Ridimensiona solo il riquadro di visualizzazione e applica l'offset del riquadro di visualizzazione del layout.
- Ridimensiona sia l'area visibile sia quella del layout.
- Non ridimensionare l'area visibile del layout o la visualizzazione visiva, sovrapponendo la tastiera virtuale su entrambi.
Questi tre comportamenti vengono visualizzati come segue:
A seconda della combinazione di browser e sistema operativo utilizzato da un visitatore, viene utilizzato uno dei comportamenti che sfuggono al tuo controllo.
Mappatura dei vari comportamenti di ridimensionamento
Nella parte Viewport Investigation Effort di Interop 2022 sono stati analizzati diversi aspetti relativi alle aree visibili, per ogni principale combinazione di browser e sistema operativo.
Uno degli aspetti testati è il comportamento di ridimensionamento quando viene mostrata l'OSK. Ciò ha portato alla seguente classificazione:
Gruppo uno
Browser che ridimensionano l'area visibile del layout, 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 sia quella del layout.
- Chrome su Android
- Firefox su Android
- Edge su Android
- Firefox su iOS
Gruppo tre
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 ciascun comportamento
Questa differenza nel modo in cui le varie aree visibili vengono ridimensionate quando viene mostrata l'OSK porta a un layout e un comportamento di dimensionamento non interoperabili dei siti web.
Nei browser del gruppo 1, con l'OSK visualizzato:
- I valori calcolati per le unità relative all'area visibile rimangono invariati.
- Gli elementi progettati per occupare l'intero spazio visivo mantengono le proprie dimensioni.
- Gli elementi che utilizzano
position: fixedrimangono invariati e possono essere oscurati dall'OSK.
Nei browser del gruppo 2, con l'OSK visualizzato:
- I valori calcolati per le unità relative all'area visibile si riducono.
- Gli elementi progettati per occupare l'intero spazio visivo si riducono.
- Gli elementi che utilizzano
position: fixedpossono finire altrove nel layout.
position: fixed (caselle blu). Sono visualizzati 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 adotti uno scripting approfondito, 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 visita il sito.
Modifica del comportamento predefinito in Chrome 108
A partire dalla versione 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 mostrata 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 l'utilizzo di unità relative all'area visibile stabili: la visualizzazione o l'occultamento dell'OSK non influisce su queste unità.
Attivare un comportamento diverso
Se vuoi che il tuo sito web utilizzi il comportamento di ridimensionamento precedente alla 108, non temere. In Chrome 108 viene fornita anche un'estensione del meta tag Viewport.
Tramite il tasto interactive-widget, puoi indicare a Chrome il comportamento di ridimensionamento che vuoi.
I valori accettati per interactive-widget sono:
resizes-visual: ridimensiona solo la visualizzazione visiva, ma non quella del layout.resizes-content: ridimensiona sia l'area visibile sia quella del layout.overlays-content: non ridimensionare l'area visibile.
Per riattivare il comportamento "precedente" di Chrome su Android, imposta il meta tag dell'area visibile su questo valore:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Se non includi interactive-widget nel meta tag dell'area visibile, Chrome utilizzerà il comportamento predefinito, ovvero resizes-visual.
Vengono visualizzate le impostazioni che hanno questo effetto sulle varie aree visibili:
resizes-visual, resizes-content e overlays-content.
Puoi provare l'effetto di ciascun valore nel browser su questo sito web demo.
Test e feedback
Prevediamo alcune piccole differenze rispetto ai siti esistenti, ma prevediamo che non blocchino gli altri perché ora la versione 108 di Chrome su Android si comporterà in modo simile a Safari su iOS. Di conseguenza, i siti web che funzionano correttamente su Safari su iOS dovrebbero funzionare correttamente anche su Chrome 108 su Android.
Tuttavia, incoraggiamo gli autori di siti web a testare attivamente i propri siti web in Chrome 108, che sarà disponibile in versione beta dal 27 ottobre 2022. Cerca in particolare gli elementi che utilizzano position: fixed e/o si basano su unità relative all'area visibile.
Il feedback può essere segnalato all'indirizzo crbug.com. Assicurati di includere "tastiera sullo schermo" nel titolo del report.