O que é a janela de exibição?
A janela de visualização é a área visível do usuário de uma página web.
A janela de visualização varia de acordo com o dispositivo, e será menor em um telefone móvel do que num monitor de computador.
Antes de tablets e telefones celulares, páginas web foram projetados apenas para telas de computador, e era comum para páginas da web para ter um design estático e um tamanho fixo.
Então, quando começamos a navegar na internet usando tablets e telefones celulares, páginas da Web tamanho fixo eram grandes demais para caber na janela de exibição. Para corrigir isso, os navegadores nesses dispositivos escalados para baixo toda a página web para caber na tela.
Este não era perfeito !! Mas uma solução rápida.
Definir a janela de exibição
HTML5 introduziu um método para deixar web designers ter controle sobre o visor, através do <meta> tag.
Você deve incluir o seguinte <meta> elemento janela de exibição em todas as suas páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Um <meta> elemento janela dá as instruções do navegador sobre como controlar dimensões e escalonamento da página.
A width=device-width parte define a largura da página, para seguir a tela de largura do dispositivo (que irá variar dependendo do dispositivo).
A initial-scale=1.0 parte 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 web sem a tag meta viewport, e na mesma página da web com a meta tag viewport:
Dica: Se você estiver navegando essa página com um telefone ou um tablet, você pode clicar sobre os dois links para ver a diferença.
Tamanho conteúdo para a janela
Os usuários são usados para rolar sites verticalmente no desktop e dispositivos móveis - mas não na horizontal!
Assim, se o usuário é forçado a rolar horizontalmente, ou diminuir o zoom, para ver toda a página web que resulta em uma má experiência do usuário.
Algumas regras adicionais a seguir:
1. Não utilize grandes elementos de largura fixa - Por exemplo, se uma imagem é exibida em uma largura maior do que a janela de exibição pode causar a janela de exibição para rolar horizontalmente. Lembre-se de ajustar esse conteúdo para caber dentro da largura da janela.
2. Não deixe que o teor de contar com uma largura viewport especialmente para tornar bem - Desde dimensões da tela e largura em pixels CSS variam amplamente entre os dispositivos, o conteúdo não deve contar com uma largura viewport especialmente para tornar bem.
3. consultas de mídia Use CSS para aplicar estilo diferente para pequenas e grandes telas - Definir grandes larguras de CSS absolutos de elementos de página, fará com que o elemento a ser muito grande para a janela de exibição em um dispositivo menor. Em vez disso, considere o uso de valores de largura relativos, como width: 100%. Além disso, ter o cuidado de usar grandes valores de posicionamento absoluto. Pode fazer com que o elemento a cair fora da janela de exibição em dispositivos pequenos.