O que é a janela de visualização virtual?

No Chrome M40, há uma mudança na janela de visualização que é bem sutil, mas deve fazer uma grande diferença para os usuários.

Quando os navegadores para dispositivos móveis começaram, a falta de uma metatag de janela de visualização significava que eles fariam a página da Web pensar que tinha aproximadamente 980 px de espaço na tela e renderizaria nesse tamanho. Com uma metatag da janela de visualização, os desenvolvedores podem definir a largura. A mais comum é a "largura do dispositivo", que define o tamanho da tela como o tamanho do dispositivo. Saiba mais sobre os Fundamentos da Web.

A maneira como Rick Byers descreve a janela de visualização virtual é a seguinte: a ideia é dividir a noção "a janela de visualização" em duas: "a janela de visualização de layout" (em que os itens de posição fixa são anexados) e "a janela de visualização visual" (o que os usuários realmente veem).

Exemplo bem simples

O site videojs.com é um bom exemplo porque a barra de apps fica fixa na parte superior e tem links nos lados esquerdo e direito dela.

A imagem abaixo mostra o que você veria se aumentasse o zoom em um site e tentasse movimentar a tela para a esquerda e para a direita.

Os dispositivos superiores são o Chrome M39, que não tem uma janela de visualização virtual, e os 3 inferiores são do Chrome M40, que tem uma janela de visualização virtual.

Renderização pixelada.
Renderização pixelada.

No Chrome M39, você verá a barra de apps depois de aumentar o zoom. No entanto, rolar para a direita não permite ver os links no lado direito da barra, apenas o logotipo.

Compare isso ao Chrome M40 (que tem uma "janela de visualização virtual") e você verá que a "janela de visualização visual" rola tudo dentro da "janela de visualização de layout", permitindo a visualização dos links à direita.

O Internet Explorer já tem esse comportamento, e essas alterações nos aproximam mais delas.

html

A única grande mudança enfrentada pelos desenvolvedores é que, no M39, era possível aplicar overflow: hidden ao elemento html e sua página ainda rolaria. No M40, não há mais suporte para isso, e a página simplesmente não rolará.

Informações mais sólidas

Quer saber mais, não é?

Bem, você pode visualizar a apresentação de slides abaixo.