Verificador de tamanho do viewport

O tamanho exato da área da página do navegador e o breakpoint correspondente.

Roda no seu navegador
Sem uploads
Sem conta

Carregando a ferramenta no navegador…

O que faz: Verificador de tamanho do viewport

Web designers, testadores de QA e qualquer pessoa que relata um bug de layout precisam da mesma informação: qual é a largura da área da página do navegador agora. O destaque mostra esse valor em pixels CSS, a unidade que as media queries usam, e ele muda ao vivo enquanto você arrasta a borda da janela.

A tabela separa o tamanho com e sem barras de rolagem, para você ver quando uma barra vertical ocupa 15 ou 17 pixels. Ela também mostra o viewport visual e a escala do zoom com os dedos em celulares, e nomeia a faixa de breakpoint, do celular ao desktop largo. Para a tela inteira, e não a janela, use o verificador de resolução de tela.

Exemplo

Sua configuração

Chrome em um MacBook, janela com 1440 pixels CSS de largura, barras de rolagem sobrepostas, proporção de pixels do dispositivo 2

O relatório mostra

Seu viewport: 1440 × 813
Pixels CSS · Extragrande (1280–1535 px, desktop)
Largura da barra de rolagem: 0 px
Viewport em pixels do dispositivo: 2880 × 1626

O macOS esconde as barras de rolagem até você rolar, então elas não ocupam largura. No Windows, a mesma janela costuma mostrar uma barra de rolagem de cerca de 15 px.

Como usar: Verificador de tamanho do viewport

Abra a página no navegador e na janela que você quer medir.
Redimensione a janela e acompanhe o tamanho e o breakpoint se atualizarem.
Clique em Copiar para incluir os números em um relato de bug.

Bom saber

Os nomes dos breakpoints seguem padrões comuns em 640, 768, 1024, 1280 e 1536 px. O CSS do seu site pode trocar de layout em outras larguras.
Isto mede a área da página, não a janela externa com abas e barra de ferramentas. As ferramentas de desenvolvedor acopladas também tiram espaço do viewport.
O zoom do navegador muda o viewport em pixels CSS: uma janela de 1440 px com zoom de 125% informa 1152 px.

Perguntas sobre Verificador de tamanho do viewport

Qual é o tamanho da janela do meu navegador?

O destaque mostra a área da página desta janela em pixels CSS, com a largura primeiro. É o tamanho que as páginas web enxergam e o tamanho capturado na gravação de uma aba. Redimensione a janela e o número muda na hora.

Qual é a diferença entre viewport e resolução de tela?

A resolução de tela é o monitor inteiro. O viewport é só a parte da janela do navegador em que a página é desenhada, descontando a barra de endereço, as abas e a moldura da janela. Em um notebook, o viewport costuma ter algumas centenas de pixels a menos de altura que a tela.

Em que tamanhos de viewport devo testar meu site?

Cubra uma largura de celular entre 375 e 430 px, um tablet perto de 768 px, um notebook entre 1280 e 1440 px e um desktop largo em 1920 px. Confira as larguras logo abaixo de cada breakpoint seu, porque os layouts costumam quebrar logo antes de trocar.

Por que o viewport muda quando o teclado abre no celular?

Teclados na tela cobrem parte da página. Os navegadores reduzem o viewport visual à área que você ainda vê, enquanto o viewport de layout muitas vezes continua igual, e é por isso que cabeçalhos e rodapés fixos podem pular de lugar.