Dimensões do Navegador
Visualize as dimensões do viewport, janela e tela do seu navegador em tempo real. Perfeito para design responsivo, teste de breakpoints e media queries CSS. Atualiza automaticamente ao redimensionar a janela.
Loading dimensions…
JavaScript is required. This tool runs entirely in your browser.
Índice
O que são Dimensões do Navegador?
As dimensões do navegador são as medidas em pixels da janela do navegador e do display. Esta ferramenta mostra o viewport (a área onde o conteúdo web é visível), a janela (incluindo o chrome do navegador) e a tela (seu display). Atualiza em tempo real ao redimensionar a janela.
Todos os valores são lidos das APIs JavaScript do seu navegador. Nenhum dado é enviado a nenhum servidor.
Viewport vs Janela vs Tela
- Viewport (interno): A área visível para conteúdo web — exclui barra de endereços, barras de ferramentas e barras de rolagem. Use isto para design responsivo e comportamento de 100vw / 100vh.
- Janela (externa): A janela completa do navegador incluindo o chrome. Útil ao testar o dimensionamento da janela ou comportamento de tela cheia.
- Tela: A resolução do seu display físico. screen.availWidth e screen.availHeight excluem barras de tarefas e UI do sistema operacional.
Casos de Uso Comuns
- Design responsivo: Verifique breakpoints e comportamento de media queries em diferentes tamanhos de viewport.
- Depuração CSS: Verifique as dimensões reais do viewport quando 100vw ou 100vh se comportam inesperadamente.
- Documentação: Capture tamanhos de viewport para especificações de design ou guias de teste.
- Teste de dispositivos: Compare dimensões entre diferentes dispositivos e níveis de zoom.
Perguntas Frequentes
O viewport exclui a UI do navegador (barra de endereços, abas, barra de favoritos, barras de rolagem). A janela inclui tudo. No mobile, a barra de endereços frequentemente se esconde ao rolar, então o viewport pode mudar.
A proporção de pixels do dispositivo (DPR) é a proporção de pixels físicos para pixels CSS. Em uma tela Retina ou de alta DPI, o DPR pode ser 2 ou 3 — um pixel CSS mapeia para múltiplos pixels físicos. Isso afeta a nitidez das imagens e a renderização de bordas de 1px.
Não. Todos os valores de dimensão são lidos localmente no seu navegador. Nada é enviado ou armazenado.