O que é Viewport?
Viewport, também chamado de área visível, é o retângulo de tela em que o conteúdo da página aparece naquele momento. Em um celular, o viewport é quase toda a tela; em um computador, é a janela do navegador, sem as barras de ferramentas.
O viewport é a medida que o navegador usa para montar o layout. Toda regra responsiva, todo ponto de quebra e toda unidade relativa de tela partem desse valor.
O viewport muda de tamanho o tempo todo. O usuário redimensiona a janela, gira o celular, abre o teclado virtual. Um site bem construído reage a essas mudanças sem quebrar, porque trabalha com medidas relativas em vez de larguras fixas em pixels.
Como funciona na prática?
O ponto de partida é uma linha no HTML, a meta tag de viewport. Sem ela, muitos celulares fingem ter uma tela larga e mostram a versão de desktop encolhida, com letras minúsculas:
<meta name="viewport" content="width=device-width, initial-scale=1">Essa instrução diz ao navegador para usar a largura real do aparelho e começar sem zoom. A partir daí, o CSS pode usar unidades ligadas ao viewport: 1vw equivale a 1% da largura visível e 1vh a 1% da altura. Uma seção com height: 100vh ocupa exatamente a altura da tela.
O viewport também define a primeira tela, a área que o visitante vê antes de rolar, onde ficam título, promessa e botão principal. E os breakpoints do CSS se apoiam na largura do viewport para trocar o arranjo do layout.
Exemplos de uso
- Uma landing page usa uma seção de abertura com 100vh de altura. A mensagem principal e o botão ocupam a tela inteira em qualquer aparelho, sem sobra nem corte.
- Um site institucional esquece a meta tag de viewport. No celular, a página aparece reduzida e o visitante precisa dar zoom para ler, o que derruba a conversão do formulário.
Erros comuns
- Omitir a meta tag de viewport e entregar a versão de desktop encolhida no celular.
- Bloquear o zoom com
user-scalable=no, o que atrapalha quem tem baixa visão. - Usar 100vh em celulares sem prever a barra de endereços, que aparece e some e faz o conteúdo pular.
- Definir larguras fixas em pixels para blocos que precisam se adaptar ao viewport.
Perguntas frequentes sobre Viewport
Qual a diferença entre viewport e resolução de tela?
Resolução é a quantidade total de pixels físicos do aparelho. Viewport é a área que o navegador realmente disponibiliza para a página, medida em pixels de CSS. Um celular com resolução alta pode ter viewport de 390 pixels de largura, porque a tela concentra vários pixels físicos em cada pixel de CSS.
Para que serve a meta tag viewport?
A meta tag viewport informa ao navegador do celular que ele deve usar a largura real do aparelho para montar a página e iniciar sem zoom. Sem essa linha, o navegador assume uma largura de desktop e exibe o site reduzido. Ela é o requisito mínimo para qualquer layout responsivo funcionar.
O que são as unidades vw e vh?
vw e vh são unidades de CSS relativas ao viewport: 1vw corresponde a 1% da largura visível e 1vh a 1% da altura. Elas permitem dimensionar blocos, espaçamentos e tipografia em proporção à tela, em vez de fixar valores que só funcionam bem em um tamanho de aparelho.