O que é Viewport

Viewport é área visível da tela em dispositivo do usuário.

Porém o tamanho dessa área visível varia de acordo com o dispositivo de acesso (computadores e celulares por exemplo), em computadores terá uma área maior e em celulares uma área menor.

Para que um site funcione em diversos dispositivos realizando uma “leitura” da área disponível, devemos utilizar o viewport.

Além de realizar a citada leitura será possível adaptar o conteúdo ao tamanho da tela, conforme a disponibilidade da área visível (no caso tamanho da tela).

Conheça nossos cursos de desenvolvimento web:

Front End – Desenvolvimento de Sites Responsivos HTML, CSS e JavaScript Para Inciantes

Elemento ‹meta› viewport

O elemento ‹meta› viewport surgiu para que os desenvolvedores tivessem controle sobre a exibição do conteúdo.

Portanto se você quer suas páginas web se comportem como responsivas (adaptáveis), uma das primeiras coisas que você se se preocupar é inserir a ‹meta› viewport.

O Viewport é usado entre as tags de abertura e fechamento do elemento ‹head› que é o elemento que recebe as configurações iniciais de um site.

Portanto a 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 a leitura da janela de visualização.

O atributo “content” recebe parâmetros que podem determinar a largura do viewport e uma escala inicial para zoom bem como o valor máximo e mínimo de tamanho que irá impossibilitar o usuário de efetuar zoom.

No nosso exemplo acima foi determinado que a largura do viewport é igual à largura do dispositivo e que o layout será exibido na largura inicial sem zoom.

Site em escala normal, em telas de computadores:

O mesmo site em escala menor, para celulares:

Porém existem mais configurações a serem feitas para que o site de fato funcione em diversos dispositivos.

Uma delas seria a configuração do Media Query.

Essa configuração, que geralmente é inclusa na área de formatação do site, permite que exista uma versão alternativa para celulares ou para computadores.

No caso é possível exibir o site de formas e até mesmo cores diferentes em cada dispositivo.

Exemplo de Media Query:

Em outras palavras, as configurações do exemplo acima tratam do mesmo item do site, porém o que está acima refere-se a computadores e o que está marcado em azul refere-se a exibição em dispositivos móveis (celulares).

Conclusão

Temos atualmente como um dos principais pontos na área de desenvolvimento de sites o “mobile-first” que trata de dar preferência para a visualização em celulares.

Isso se deve ao fato de celulares serem os dispositivos mais usados para acessar páginas e aplicações Web, já há muitos anos.

Então caso esteja ingressando na carreira de desenvolvimento, entender o viweport e o uso de media query é fundamental.

Espero ter ajudado com este post! E se você se interessa em saber mais sobre Viewport e Desenvolvimento Front end, conheça o meu curso Programação Web.

Esta é uma publicação de Wagner Cardoso da TecTreinamentos Informática. Na Workover Academy o Prof. Wagner tem 8 cursos publicados!

Wagner Cardoso

Sou Profissional na área de Tecnologia e também apaixonado por jogos e cinema. Formado em Análise e Desenvolvimento de Sistemas e Pós – Graduado em Docência para Ensino Superior. Possuo Certificação Microsoft Office Specialist (MOS) e trabalho com soluções computacionais já há mais de 17 anos. Desde 2012 atuo em uma ONG na Cidade de São Paulo – Brasil, onde sou Técnico Especializado e ministro aulas para turmas presenciais na área de Informática. Me dedico ao empreendedorismo digital acreditando na democratização do conhecimento por intermédio da internet. Tenho grande prazer em poder ensinar, transmitir conhecimento e claro, participar do crescimento das pessoas.