Design de página web responsiva - Visão

O que é a visualização?

A visualização (viewport) é a área visível do usuário na página da web.

A visualização varia de dispositivo para dispositivo, sendo menor em telefones celulares do que em telas de computadores.

Antes dos tablets e smartphones, as páginas da web eram projetadas apenas para telas de computadores, e era comum que as páginas tivessem designs estáticos e tamanhos fixos.

Então, quando começamos a navegar na internet com tablets e smartphones, as páginas da web de tamanho fixo eram muito grandes para se adaptarem à visualização. Para resolver esse problema, os navegadores desses dispositivos reduzem a página inteira proporcionalmente para se ajustar ao tamanho da tela.

Isso não é perfeito! É uma correção rápida.

configurar a visualização

O HTML5 introduziu um método que permite que os designers da Web <meta> etiqueta para controlar a visualização em todas as páginas.

Você deve incluir a seguinte <meta> Elemento de visualização:

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

Ele fornece instruções ao navegador sobre como controlar o tamanho da página e a escala de zoom.

width=device-width Alguns ajustam a largura da página para seguir a largura da tela do dispositivo (dependendo do dispositivo).

Quando o navegador carrega a página pela primeira vez,initial-scale=1.0 Alguns ajustes de nível inicial de zoom.

A seguir estão exemplos de páginas da web sem o marcador meta de visualização e páginas da web com o marcador meta de visualização:

Dica:Se você estiver navegando na página com um telefone ou tablet, você pode clicar nos dois links abaixo para ver as diferenças.



Sem marcador meta de visualização


Com o marcador meta de visualização

Ajuste o conteúdo ao tamanho da visualização.

Os usuários estão acostumados a rolar verticalmente nos sites em computadores de mesa e dispositivos móveis, em vez de rolar horizontalmente!

Portanto, se for forçado a fazer o usuário rolar horizontalmente ou diminuir para ver toda a página da web, isso levará a uma má experiência do usuário.

Além disso, algumas regras adicionais precisam ser seguidas:

1. Não use elementos de largura fixa grande - Por exemplo, se a largura da imagem for maior que a largura da visão, pode ocorrer rolagem horizontal na visão. Certifique-se de ajustar esse conteúdo para se adequar à largura da visão.

2. Não deixe o conteúdo depender de uma largura de visão específica para apresentar bons resultados - Devido às variações significativas nas dimensões e larguras de tela em dispositivos, o conteúdo não deve depender de uma largura de visão específica para apresentar bons resultados.

3. Use consultas de mídia CSS para aplicar estilos diferentes a pequenos e grandes telas - Definir uma largura CSS absoluta grande para elementos de página pode fazer com que esses elementos sejam muito largos para a visão de dispositivos menores. Em vez disso, considere usar valores de largura relativa, como width: 100%. Além disso, tenha cuidado ao usar valores de alinhamento absoluto grandes, o que pode fazer com que os elementos se desloquem para fora da visão da página em dispositivos pequenos.