Web Design Responsivo - A janela de visualização

O que é a janela de visualização?

A janela de visualização é a área visível do usuário de uma página da web.

A janela de visualização varia de acordo com o dispositivo e será menor em um telefone celular do que em uma tela de computador.

Antes dos tablets e celulares, as páginas da web eram projetadas apenas para telas de computador, e era comum que as páginas da web tivessem um design estático e um tamanho fixo.

Então, quando começamos a navegar na internet usando tablets e telefones celulares, as páginas da web de tamanho fixo eram muito grandes para caber na janela de visualização. Para corrigir isso, os navegadores desses dispositivos reduziram toda a página da Web para caber na tela.

Isso não foi perfeito!! Mas uma solução rápida.

Configurando a janela de visualização

O HTML5 introduziu um método para permitir que os web designers assumam o controle da viewport, por meio da <meta>tag.

Você deve incluir o seguinte <meta>elemento de janela de visualização em todas as suas páginas da web:

Isso fornece ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página.

A width=device-widthparte define a largura da página para seguir a largura da tela do dispositivo (que varia de acordo com o dispositivo).

A initial-scale=1.0parte define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

Aqui está um exemplo de uma página da web sem a meta tag viewport e a mesma página da web com a meta tag viewport:

Sem a metatag da janela de visualização

Com a metatag da janela de visualização

Dimensionar o conteúdo para a viewport

Os usuários estão acostumados a rolar sites verticalmente em computadores e dispositivos móveis - mas não horizontalmente!

Portanto, se o usuário for forçado a rolar horizontalmente ou diminuir o zoom para ver toda a página da Web, isso resultará em uma experiência de usuário ruim.

Algumas regras adicionais a seguir:

1. NÃO use grandes elementos de largura fixa - Por exemplo, se uma imagem for exibida com uma largura maior que a janela de visualização, ela poderá fazer com que a janela de visualização role horizontalmente. Lembre-se de ajustar este conteúdo para caber na largura da janela de visualização.

2. NÃO permita que o conteúdo dependa de uma largura de janela de visualização específica para renderizar bem - Como as dimensões da tela e a largura em pixels CSS variam muito entre os dispositivos, o conteúdo não deve depender de uma largura de janela de visualização específica para renderizar bem.

3. Use consultas de mídia CSS para aplicar estilos diferentes para telas pequenas e grandes - Definir grandes larguras absolutas de CSS para elementos de página fará com que o elemento seja muito largo para a janela de visualização em um dispositivo menor. Em vez disso, considere usar valores de largura relativos, como largura: 100%. Além disso, tenha cuidado ao usar valores de posicionamento absolutos grandes. Isso pode fazer com que o elemento fique fora da janela de visualização em dispositivos pequenos.