En Chrome M40, hay un cambio en el viewport que es bastante sutil, pero debería marcar una gran diferencia para los usuarios.
Cuando comenzaron a usarse los navegadores para dispositivos móviles, la falta de una metaetiqueta de viewport hacía que la página web pensara que tenía aproximadamente 980 px de espacio en pantalla y se renderizara en ese tamaño. Con una metaetiqueta de viewport, los desarrolladores pueden definir el ancho, el más común de los cuales es "device-width", que establece el tamaño de la pantalla en el del dispositivo. Puedes obtener más información sobre los fundamentos de la Web.
La forma en que Rick Byers describe la vista virtual es la siguiente: la idea de la vista virtual es dividir la noción de “la vista” en dos, “la vista de diseño” (donde se adjuntan los elementos de posición fija) y “la vista visual” (lo que los usuarios ven realmente).
Ejemplo muy simple
El sitio web videojs.com es un buen ejemplo, ya que su barra de aplicación está fija en la parte superior y tiene vínculos en el lado izquierdo y derecho de la barra de aplicación.
En la siguiente imagen, se muestra lo que verías si acercaras un sitio y trataras de desplazarte hacia la izquierda y la derecha.
Los dispositivos de la parte superior son Chrome M39, que no tiene un viewport virtual, y los 3 de la parte inferior son de Chrome M40, que tiene un viewport virtual.
En Chrome M39, verás la barra de la aplicación después de acercar la imagen, pero el desplazamiento 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" desplaza todo 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 acercan más a él.
html
El único cambio importante que enfrentan los desarrolladores con esto es que, en M39, podías aplicar overflow: hidden al elemento html y tu página se seguía desplazando. En M40, ya no se admite esto, la página simplemente no se desplaza.
Información más sólida
¿Quieres obtener más información?
Puedes ver la presentación de diapositivas a continuación.