Viewport é a área que o navegador usa para exibir uma página, e o tamanho do viewport é a largura e a altura dessa área medidas em pixels CSS. Ele costuma ser bem menor que a resolução da tela: um iPhone com tela de 1206 × 2622 pixels tem viewport de 402 × 874 pixels CSS, porque cada pixel CSS é desenhado com três pixels físicos em cada direção. CSS responsivo, media queries e quase todas as decisões de layout usam o tamanho do viewport, não a resolução da tela.
Tamanho do viewport vs resolução de tela
Três números descrevem a tela de um celular, e é fácil confundir:
| Termo | Exemplo (iPhone 17) | O que é |
|---|---|---|
| Resolução de tela | 1206 × 2622 px | Pixels físicos do painel |
| Device pixel ratio (DPR) | 3 | Pixels físicos por pixel CSS, em cada direção |
| Tamanho do viewport | 402 × 874 px CSS | Resolução dividida pelo DPR; é o que o CSS enxerga |
No desktop, o DPR costuma ser 1 (um monitor 1920 × 1080 em 100% dá um viewport de 1920 px de largura, menos as barras de rolagem) ou 2 em notebooks com tela de alta densidade. O zoom do navegador também muda o DPR: com zoom de 200%, a largura do viewport em pixels CSS cai pela metade.
Os números de cada modelo estão na tabela de tamanhos de tela e viewport do iPhone.
Como descobrir o tamanho do seu viewport
No console do navegador
Abra o DevTools (F12 ou Cmd + Option + I), vá até a aba Console e rode:
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth inclui a barra de rolagem vertical. document.documentElement.clientWidth não inclui e fica mais perto do que as porcentagens do CSS e as larguras de 100% usam.
No modo dispositivo do DevTools
A barra de dispositivos mostra o tamanho do viewport emulado acima da página. No modo Responsive, dá para arrastar as bordas ou digitar qualquer tamanho. Veja o guia do emulador mobile do Chrome.
No celular
Abra qualquer site do tipo “what is my viewport” ou carregue uma página com um script simples que mostre innerWidth e devicePixelRatio. O resultado depende da orientação e das barras do navegador.
Layout viewport e visual viewport
Na prática, os navegadores mobile têm dois viewports:
- O layout viewport é a área em que o CSS monta a página. Com a meta tag viewport correta, a largura dele é igual à largura do aparelho em pixels CSS.
- O visual viewport é a parte visível na tela naquele momento. Ele diminui quando o usuário dá zoom com os dedos ou quando o teclado virtual abre.
Elementos com position: fixed são posicionados em relação ao layout viewport, e é por isso que um rodapé fixo pode acabar escondido atrás do teclado. No JavaScript, o visual viewport aparece em window.visualViewport.width e .height, e dá para escutar o evento resize dele.
Por que a altura do viewport muda tanto no celular
No celular, a barra de endereço e as barras de ferramentas se recolhem durante a rolagem, então a altura visível muda. A unidade clássica 100vh usa a maior altura possível, e por isso seções de tela cheia costumavam ficar cortadas embaixo. Agora o CSS tem uma unidade para cada caso:
| Unidade | Significado |
|---|---|
svh |
Altura pequena do viewport: barras do navegador visíveis |
lvh |
Altura grande do viewport: barras totalmente escondidas |
dvh |
Altura dinâmica: muda conforme as barras se movem |
vh |
Igual a lvh nos navegadores mobile atuais |
Para uma seção de abertura que precisa caber na tela quando a página carrega, min-height: 100svh costuma ser a escolha mais segura. Para largura, existem as unidades svw, lvw e dvw.
Tamanhos de viewport comuns
| Tipo de aparelho | Larguras de viewport típicas (retrato) |
|---|---|
| Celulares pequenos | 320–375 px |
| iPhones atuais | 375–440 px |
| Celulares Android | 360–412 px |
| Tablets | 744–1032 px |
| Notebooks | 1280–1536 px |
| Monitores de desktop | 1440–2560 px |
Essas faixas explicam por que layouts responsivos são fluidos entre breakpoints em vez de mirar em tamanhos exatos.
Como testar diferentes tamanhos de viewport
Redimensionar a janela no desktop muda a largura do viewport, mas os navegadores de desktop geralmente param perto de 500 px e mantêm DPR 1 ou 2. Para ver um viewport de celular com o tamanho e a densidade certos, use o modo dispositivo do DevTools ou uma extensão de visualização mobile como a Mobile View Extension, que aplica o tamanho de tela, o DPR e o user agent de um aparelho e aceita resoluções personalizadas. O processo completo está em como testar a responsividade de um site.
Perguntas frequentes
Qual é o tamanho do meu viewport?
Rode window.innerWidth e window.innerHeight no console do navegador. No celular, abra uma página que mostre esses valores; o resultado muda com a orientação.
Tamanho do viewport é o mesmo que resolução de tela?
Não. O tamanho do viewport é medido em pixels CSS, e a resolução em pixels físicos. Divida a resolução pelo device pixel ratio para chegar ao tamanho do viewport.
Para qual tamanho de viewport devo criar o layout?
Crie layouts fluidos que funcionem a partir de 320 px. Confira as larguras comuns de celular de 360, 390–402 e 430–440 px, um tablet por volta de 768–834 px e desktop por volta de 1280–1440 px.