En noviembre, con el lanzamiento de Chrome 108, Chrome realizará algunos cambios en el comportamiento del diseño del viewport cuando se muestra el teclado en pantalla (OSK). Con este cambio, Chrome para Android ya no cambiará el tamaño del viewport de diseño, sino que solo cambiará el tamaño del viewport visual. Esto hará que el comportamiento de Chrome en Android sea similar al de Chrome en iOS y Safari en iOS.
Aquí tienes información sobre lo que sucede, por qué Chrome realiza este cambio y lo que puedes hacer para prepararte.
La vista del puerto de diseño y la vista del puerto visual
Cuando visitas un sitio web, no puedes ver todo el contenido de la página después de que se carga. En su lugar, el navegador te ofrece un viewport a través del cual puedes ver una parte de la página. Este viewport también se conoce como viewport de diseño. Cuando el contenido de una página crece demasiado, el navegador ofrece un mecanismo de desplazamiento.
Cuando posiciones elementos con position: fixed, estos se organizarán en función de ese viewport de diseño. A medida que la vista del 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 (cajas azules). Se muestran (de izquierda a derecha) Safari en iPhone, Chrome en Android y Firefox en Android.
Además de esta ventana de visualización de diseño, el navegador también ofrece una ventana de visualización visual. Representa la parte del viewport que está visible actualmente. En el nivel de zoom 1, esta ventana de visualización visual es tan grande como la ventana de visualización de diseño.
Cuando acercas la imagen con dos dedos, reduces el tamaño de la ventana de visualización visual en relación con la ventana de visualización del diseño.
Comportamiento de cambio de tamaño del viewport
Cuando se enfoca una entrada o cualquier otra área editable, los dispositivos (la mayoría de los dispositivos con pantalla táctil) pueden mostrar un teclado en pantalla. Este teclado, que a menudo se conoce como 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:
- Cambia el tamaño solo de la ventana gráfica visual y desplaza la ventana gráfica de diseño.
- Cambia el tamaño de la vista del puerto visual y del diseño.
- No cambies el tamaño del viewport de diseño ni del viewport visual, y superpone el teclado virtual sobre ambos.
Estos tres comportamientos se visualizan de la siguiente manera:
Dependiendo de la combinación de navegador y SO que use un visitante, se usará uno de los comportamientos, más allá de tu control.
Cómo asignar los diversos comportamientos de cambio de tamaño
En el Esfuerzo de investigación de viewports de Interop 2022, se investigaron varios aspectos relacionados con el viewport para cada combinación principal de navegador y SO.
Uno de los aspectos probados es el comportamiento de cambio de tamaño cuando se muestra el teclado en pantalla. Esto llevó a la siguiente clasificación:
Grupo uno
Navegadores que cambian el tamaño de la ventana de visualización visual y no modifican la ventana de visualización 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
Son navegadores que cambian el tamaño de la viewport visual y del diseño.
- Chrome en Android
- Firefox en Android
- Edge en Android
- Firefox en iOS
Grupo tres
Navegadores que no cambian el tamaño de ninguna de las viewports:
- Ninguno de forma predeterminada: En Chrome para Android, puedes habilitar este comportamiento a través de la API de VirtualKeyboard.
Efectos secundarios de cada comportamiento
Esta diferencia en la forma en que se cambia el tamaño de los diferentes viewports cuando se muestra el teclado en pantalla (OSK) genera un comportamiento de diseño y tamaño no interoperable de los sitios web.
En los navegadores del grupo 1, con la OSK visible:
- Los valores calculados para las unidades relativas al viewport siguen siendo los mismos.
- Los elementos diseñados para ocupar todo el espacio visual conservan su tamaño.
- Los elementos que usan
position: fixedpermanecen en su lugar y pueden quedar ocultos por el teclado en pantalla.
En los navegadores del grupo 2, se muestra el OSK:
- Los valores calculados para las unidades relativas de viewport se reducen.
- Los elementos que se diseñaron para ocupar todo el espacio visual se reducen.
- Los elementos que usan
position: fixedpueden terminar en otra parte del diseño.
position: fixed (cuadros azules). Se muestran Safari en iOS (izquierda) y Chrome en Android (centro y derecha).
A menos que recurras al espionaje de usuario-agente o uses secuencias de comandos extensas, no podrás saber qué comportamiento se usa. Tampoco puedes cambiar el comportamiento, ya que se determina según la combinación de navegador y SO desde la que visita el usuario.
Cambio del comportamiento predeterminado en Chrome 108
A partir de Chrome 108, Chrome para Android ajustará su comportamiento de cambio de tamaño del viewport para que ya no cambie el tamaño del viewport de diseño cuando se muestre el teclado en pantalla.
Esto alineará el comportamiento de Chrome en Android con el de Chrome en iOS, iPadOS, Windows y CrOS, de Safari en iOS y iPadOS, y de Edge en iOS, iPadOS y Windows.
Gracias a este cambio, los autores pueden saber qué comportamiento se usará, independientemente del SO en el que se ejecute Chrome. Además, permite unidades estables relativas al viewport: mostrar o ocultar el teclado en pantalla no afecta a estas unidades.
.Cómo habilitar un comportamiento diferente
Si quieres que tu sitio web use el comportamiento de cambio de tamaño anterior a la versión 108, no te preocupes. También se incluye en Chrome 108 una extensión de la metaetiqueta de viewport.
A través de la clave interactive-widget, puedes indicarle a Chrome qué comportamiento de cambio de tamaño deseas.
Los valores aceptados para interactive-widget son los siguientes:
resizes-visual: Cambia el tamaño solo de la Ventana gráfica visual, pero no la Ventana gráfica de diseño.resizes-content: Cambia el tamaño del viewport visual y del viewport de diseño.overlays-content: No cambies el tamaño de ningún viewport.
Para volver a habilitar el "antiguo" comportamiento 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 del viewport, Chrome usará el comportamiento predeterminado, que es resizes-visual.
Visualmente, la configuración tiene este efecto en las diferentes ventanas de visualización:
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
Se esperan algunas diferencias menores en los sitios existentes, pero se espera que no sean de bloqueo, ya que Chrome 108 en Android se comportará de manera similar a Safari en iOS. Por lo tanto, los sitios web que funcionan bien en Safari en iOS también deberían funcionar bien en Chrome 108 en Android.
Sin embargo, recomendamos a los autores de sitios web que prueben sus sitios de forma activa en Chrome 108, que estará en versión beta a partir del 27 de octubre de 2022. Busca específicamente elementos que usen position: fixed o que dependan de unidades relativas al viewport.
Puedes informar comentarios en crbug.com. Asegúrate de incluir "teclado en pantalla" en el título del informe.