Testador de Tamanho de Viewport e Breakpoint Responsivo
Veja o tamanho real da janela do seu navegador para uma página web. Esta ferramenta lê a largura e a altura do seu viewport em pixels CSS, a proporção de pixels do seu dispositivo e a orientação, e mostra em qual breakpoint responsivo o tamanho atual se encaixa — tudo ao vivo. Redimensione a janela e cada valor é atualizado instantaneamente.
Redimensione a janela do seu navegador e veja esses valores atualizarem ao vivo.
Breakpoints do Tailwind CSS
A faixa em que seu viewport se encaixa é destacada conforme você redimensiona.
| Prefixo | Largura mínima | Aplica-se a partir de |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Categorias de dispositivo
Painel de teste redimensionável
Arraste o canto inferior direito para redimensionar este painel. Ele informa seu próprio tamanho e qual breakpoint essa largura atingiria — um indicador responsivo rápido.
Tamanhos comuns de viewport de dispositivos
Viewports aproximados em pixels CSS no modo retrato, para referência — os valores reais variam conforme o navegador e o sistema operacional.
| Dispositivo | Viewport (px CSS) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Ferramentas relacionadas
O que é um viewport
O viewport é a área visível que uma página web tem disponível para desenhar — a região de conteúdo da janela do seu navegador, sem contar as abas, a barra de endereço ou a barra de favoritos. Por isso ele é quase sempre menor que a resolução da sua tela: a tela é o painel inteiro, enquanto o viewport é apenas a fatia que a página pode usar. window.innerWidth e window.innerHeight informam essa área em pixels CSS, e documentElement.clientWidth/clientHeight informam o viewport de layout (a mesma área menos a largura de uma barra de rolagem clássica, quando presente). Como o viewport muda no instante em que você redimensiona, divide a tela ou gira o dispositivo, é esse o número ao qual os layouts responsivos realmente respondem.
Pixels CSS vs. pixels do dispositivo e devicePixelRatio
Um pixel CSS é uma unidade de layout, não um ponto físico no painel. Em uma tela padrão, um pixel CSS corresponde a um pixel físico, mas telas de alta densidade 'Retina' comprimem dois ou três pixels físicos em cada pixel CSS para que o texto pareça mais nítido. window.devicePixelRatio informa esse multiplicador: um valor de 2 significa que um viewport de 1440 pixels CSS de largura é desenhado com 2880 pixels físicos. As páginas web são organizadas em pixels CSS, então um celular que reporta um viewport de 390 pixels de largura com um DPR de 3 tem um painel físico de aproximadamente 1170 pixels de largura. Para ver a resolução física total e a densidade de pixels da sua tela, use as ferramentas Qual É o Tamanho da Minha Tela e Teste de Resolução de Tela.
Breakpoints responsivos
Um breakpoint é uma largura de viewport na qual um layout muda — colunas se empilham, um menu se recolhe, o tamanho do texto muda. Consultas de mídia CSS e frameworks utilitários como o Tailwind CSS definem um pequeno conjunto de larguras nomeadas e aplicam estilos a partir dessa largura para cima. Os padrões do Tailwind são sm em 640px, md em 768px, lg em 1024px, xl em 1280px e 2xl em 1536px; abaixo de 640px você está na faixa base sem prefixo. A referência abaixo destaca a faixa ativa conforme você redimensiona, e o painel de teste arrastável informa qual breakpoint sua própria largura atingiria — uma forma rápida de pré-visualizar como um componente se comporta em diferentes tamanhos sem alterar a janela inteira.
Por que innerWidth difere da largura da tela
Vários fatores ficam entre a resolução do seu painel e o viewport que uma página vê. Os elementos do navegador (abas, barras de ferramentas e uma barra de rolagem visível) reduzem a área utilizável. O zoom da página também altera isso: aumentar o zoom reduz o número de pixels CSS que cabem, então o innerWidth diminui mesmo que a janela não tenha se movido, e também afeta o devicePixelRatio. Em dispositivos móveis, a tag meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — instrui o navegador a definir o viewport de layout com a largura do dispositivo, em vez de simular um desktop de ~980px, por isso os sites responsivos precisam dela. O dimensionamento de tela do sistema operacional também altera a contagem de pixels CSS, o que explica por que dois monitores idênticos podem reportar tamanhos de viewport diferentes.