En noviembre, con el lanzamiento de Chrome 108, Chrome realizará algunos cambios en el comportamiento de la viewport de diseño cuando se muestre el teclado en pantalla (OSK). Con este cambio, Chrome en Android ya no cambiará el tamaño de la ventana de visualización de diseño, sino que solo cambiará el tamaño de la ventana de visualización visual. Esto hará que el comportamiento de Chrome en Android esté al mismo nivel que el de Chrome en iOS y Safari en iOS.
Aquí encontrarás información sobre lo que sucede, los motivos por los que Chrome hará este cambio y lo que puedes hacer para prepararte.
La ventana de visualización de diseño y la ventana de visualización visual
Cuando visitas un sitio web, no puedes ver el contenido de la página completa después de que se carga. En cambio, el navegador te ofrece un viewport a través del cual puedes ver una parte de la página. Esta viewport también se conoce como vista del puerto de diseño. Cuando el contenido de una página se expande demasiado, el navegador ofrece un mecanismo de desplazamiento.
Cuando coloques elementos con position: fixed, estos se posicionarán en esa viewport de diseño. Como la viewport de diseño permanece en su lugar mientras te desplazas hacia abajo en una página, también lo harán los elementos que usan position: fixed.
position: fixed (cuadros azules). De izquierda a derecha, se muestran Safari en iPhone, Chrome en Android y Firefox en Android.
Además de esta viewport de diseño, el navegador también ofrece una vista del puerto visual. Representa la parte del viewport que es visible actualmente. En el nivel de zoom 1, esta viewport visual es tan grande como la de diseño.
Cuando pellizcas la pantalla, se reduce el tamaño de la ventana de visualización visual en relación con la de diseño.
Comportamiento de cambio de tamaño de la vista del puerto
Cuando enfocas una entrada o cualquier otra área editable, los dispositivos (principalmente dispositivos con pantalla táctil) pueden mostrar un teclado en pantalla. Este teclado, a menudo denominado teclado virtual,permite a los usuarios ingresar contenido en el área editable.
Cuando lo hacen, los navegadores responden de una de las siguientes maneras en relación con los diferentes viewports:
- Cambiar el tamaño solo de la viewport visual y desplazar la ventana de diseño.
- Cambiar el tamaño de la viewport visual y la de diseño
- No cambies el tamaño de ninguna de las viewports de diseño ni visual, ya que se debe superponer el teclado virtual sobre ambas.
Estos tres comportamientos se visualizan de la siguiente manera:
Según la combinación de navegador y SO que utilice un visitante, se utilizará uno de los comportamientos, fuera de tu control.
Asignación de los diversos comportamientos de cambio de tamaño
En la parte Esfuerzo de investigación de viewports de Interop 2022, se investigaron varios aspectos relacionados con viewports, para cada combinación importante de navegador y SO.
Uno de los aspectos probados es el comportamiento de cambio de tamaño cuando se muestra el OSK. Esto condujo a la siguiente clasificación:
Grupo uno
Navegadores que cambian el tamaño de la viewport visual y dejan intacta la ventana de diseño.
- Safari en iOS
- Safari en iPadOS
- Chrome en ChromeOS
- Chrome en iOS,
- Chrome en iPadOS
- Edge en iOS
- Edge en iPadOS
Grupo dos
Navegadores que cambian el tamaño de la viewport visual y la de diseño.
- Chrome en Android
- Firefox en Android
- Edge en Android
- Firefox en iOS
Grupo tres
Navegadores que no cambian de tamaño ninguno de los viewports:
- Ninguno de manera predeterminada. En Chrome para Android, puedes habilitar este comportamiento mediante la API de VirtualKeyboard.
Efectos secundarios de cada comportamiento
Esta diferencia en la forma en que se cambia el tamaño de los distintos viewports cuando se muestra el OSK conduce a un comportamiento de diseño y tamaño no interoperable de los sitios web.
En los navegadores del grupo 1, con la OSK que se muestra:
- Los valores calculados para las unidades relativas de viewport son los mismos.
- Los elementos diseñados para ocupar todo el espacio visual mantienen su tamaño.
- Los elementos que usan
position: fixedpermanecen en su lugar y el OSK puede ocultarlos.
En los navegadores del grupo 2, con la OSK que se muestra:
- Los valores calculados para las unidades relativas de viewport se reducen.
- Los elementos diseñados para ocupar todo el espacio visual se achican.
- Los elementos que usan
position: fixedpueden terminar en otro lugar del diseño.
position: fixed (cajas azules). Se muestran Safari en iOS (izquierda) y Chrome en Android (centro y derecha).
A menos que recurras a los detectores de usuarios-agentes o que dependas de muchas secuencias de comandos, no podrás saber qué comportamiento se utiliza. Tampoco puedes cambiar el comportamiento, ya que lo determina la combinación de navegador y SO desde la cual visita el usuario.
Cambio del comportamiento predeterminado en Chrome 108
A partir de Chrome 108, Chrome en Android ajustará su comportamiento de cambio de tamaño del viewport para que ya no se cambie el tamaño de la viewport de diseño cuando se muestre el teclado en pantalla.
De esta forma, se alineará el comportamiento de Chrome en Android con el de Chrome en iOS, iPadOS, Windows y CrOS, con Safari en iOS y iPadOS, y con Edge en iOS, iPadOS y Windows.
Gracias a este cambio, los autores pueden saber qué comportamiento se utilizará, independientemente del SO en el que se esté ejecutando Chrome. Además, permite unidades relativas del viewport estables: mostrar u ocultar el OSK no afecta estas unidades.
Habilita un comportamiento diferente
Si deseas que tu sitio web use el comportamiento de cambio de tamaño anterior a la 108, no temas. Además, en Chrome 108 se incluye una extensión de la metaetiqueta de la vista del puerto.
Con la tecla interactive-widget, puedes indicarle a Chrome el comportamiento de cambio de tamaño que quieras.
Se aceptan los siguientes valores para interactive-widget:
resizes-visual: Cambia el tamaño solo de la viewport visual, pero no la de diseño.resizes-content: Cambia el tamaño de la viewport visual y la de diseño.overlays-content: No cambias el tamaño de ningún viewport.
Para volver a habilitar el comportamiento “antiguo” de Chrome en Android, configura la metaetiqueta de la vista del puerto de la siguiente manera:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Si no incluyes interactive-widget en la metaetiqueta de viewport, Chrome usará el comportamiento predeterminado, que es resizes-visual.
Como se visualiza en la imagen, los parámetros de configuración tienen este efecto en las distintas viewports:
resizes-visual, resizes-content y overlays-content.
Puedes probar el efecto de cada valor en tu navegador en este sitio web de demostración.
Pruebas y comentarios
Esperamos que haya algunas diferencias menores con los sitios existentes, pero esperamos que no provoquen bloqueos, ya que Chrome 108 en Android ahora se comportará de manera similar a Safari en iOS. Por lo tanto, los sitios web que funcionan bien en Safari para iOS también deberían funcionar bien en Chrome 108 en Android.
Sin embargo, recomendamos a los autores de sitios web que prueben activamente sus sitios en Chrome 108, que está en versión beta a partir del 27 de octubre de 2022. Presta especial atención a los elementos que usen position: fixed o que dependan de unidades relativas de viewports.
Los comentarios se pueden informar en crbug.com. Asegúrate de incluir "teclado en pantalla" en el título del informe.