Janela de visualização de web design responsivo

Índice

O que é a janela de visualização?

A janela de visualização é a área visível do usuário em 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 na tela de um computador.

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

Depois, quando começamos a navegar na internet usando tablets e celulares, fixos páginas da web de tamanho grande eram muito grandes para caber na janela de visualização. Para corrigir isso, os navegadores nesses dispositivos reduziram a página inteira 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 web designers assumam o controle da janela de visualização, por meio do Etiqueta .

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

A parte width=device-width define a largura da página para seguir a largura da tela do dispositivo (que irá variar dependendo do dispositivo).

A parte initial-scale=1.0 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 da janela de visualização e a mesma página da web com a meta tag da janela de visualização:

Without the viewport meta tag

With the viewport meta tag

Dica: se você estiver navegando nesta página com um telefone ou tablet, clique nos dois links acima para ver a diferença.

Dimensionar o conteúdo para a janela de visualização

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

Portanto, se o usuário for forçado a rolar horizontalmente ou diminuir o zoom para ver o página inteira da web, isso resulta em uma experiência do usuário ruim.

Algumas regras adicionais a seguir:

1. NÃO use elementos grandes de largura fixa - Por exemplo, se uma imagem for exibida com uma largura maior que a da janela de visualização, isso pode causar viewport para rolar horizontalmente. Lembre-se de ajustar este conteúdo para caber dentro a largura da janela de visualização.

2. NÃO deixe o conteúdo depender 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 amplamente entre 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 grandes - Definindo grandes larguras CSS absolutas 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 relativos de largura, como width: 100%. Além disso, seja cuidado ao usar grandes valores de posicionamento absoluto. Isso pode fazer com que o elemento ficam fora da janela de visualização em dispositivos pequenos.