Configurando o viewport no HTML
Viewport é área visível em dispositivo do usuário onde se deve visualizar o site, e varia de acordo com o dispositivo de acesso.
Layouts fixos quando acessado por dispositivos móveis, mesmo de grandes dimensões são ajustados reduzindo seu tamanho para caber na tela. Isso quer dizer que qualquer layout pode ser interpretado por celulares e tablets como se fosse um layout para desktop o que resulta na redução do tamanho.
Esse comportamento obriga o usuário a dar zoom na tela por causa da má legibilidade.
Essa redução de tamanho acontece porque falta não foi instruído ao navegador mobile uma configuração básica feita através de um elemento HTML especial.
Elemento ‹meta› viewport
O elemento ‹meta› viewport surgiu para os desenvolvedores tivesse controle sobre o viewport. Portanto se você quer suas páginas web se comportem como responsivas uma das primeiras coisas que você se se preocupar é inserir a ‹meta› viewport entre as tags de abertura e fechamento do elemento ‹head›. Uma configuração bastante utilizada é a que veremos se seguir.
<meta name="viewport" content="width=device-width, initial-scale=1.0">No código a tag recebe o atributo name com valor viewport que determina que teremos o controle da janela de visualização. O atributo content recebe parâmetros que podem determinar a largura do viewport, a escala inicial para zoom, o valor máximo e mínimo de escala e até impossibilitar o usuário de efetuar zoom.
No nosso exemplo foi determinado que a largura que a largura do viewport é igual à largura do dispositivo e que o layout será exibido na largura inicial sem zoom.
Para uma melhor compreensão sobre o elemento ‹meta› viewport assista o vídeo a seguir.
9 / 14