¿Qué es la ventana gráfica virtual?

En Chrome M40, se produce un cambio en el viewport que es bastante sutil, pero debería marcar una gran diferencia para los usuarios.

Cuando comenzaron los navegadores para dispositivos móviles, la falta de una metaetiqueta de viewport hacía que la página web crease que tenía aproximadamente 980 px de espacio en pantalla y se renderizaba en este tamaño. Con una metaetiqueta de viewport, los desarrolladores pueden definir el ancho, que es el más común para el "ancho del dispositivo", que establece el tamaño de la pantalla en el del dispositivo. Puedes obtener más información en Fundamentos de la Web.

La forma en que Rick Byers describe el viewport virtual es la siguiente: la idea de este último es dividir la noción de "el viewport" en dos: "el de diseño" (donde se adjuntan los elementos de posición fija) y "el viewport visual" (lo que los usuarios realmente ven).

Ejemplo súper simple

El sitio web videojs.com es un buen ejemplo porque su barra de la app está fija en la parte superior y tiene vínculos a la izquierda y a la derecha de la barra.

En la siguiente imagen, se muestra lo que verías si acercas la imagen de un sitio y tratas de desplazarte lateralmente hacia la izquierda y la derecha.

Los dispositivos superiores son Chrome M39, que no tiene un viewport virtual, y los 3 inferiores son de Chrome M40, que no tiene un viewport virtual.

Renderización pixelada
Renderización pixelada

En Chrome M39, verás la barra de la aplicación después de acercar la imagen, pero desplazarte hacia la derecha no te permite ver los vínculos del lado derecho de la barra; solo verás el logotipo.

Compara esto con Chrome M40 (que tiene un " viewport virtual") y verás que el " viewport visual" se desplaza por todo lo que está dentro del " viewport de diseño", lo que te permite ver los vínculos de la derecha.

Internet Explorer ya tiene este comportamiento y estos cambios nos alinean más con ellos.

html

El único cambio importante para los desarrolladores que viene con este cambio es que, en M39, se puede aplicar el desbordamiento: oculto en el elemento HTML, y la página se desplazaría de todos modos. En M40, esto ya no es compatible: la página simplemente no se desplazará.

Información más sólida

Quieres aprender más, ¿no?

Entonces, puedes ver la presentación de diapositivas a continuación.