TOOLADEX
light
← Back to Blog

Dimensões do Navegador: Visualize o Viewport e o Tamanho da Tela em Tempo Real

By Tooladex Team •
Dimensões do navegadorViewportDesign responsivoFerramentas de desenvolvedor
Dimensões do Navegador: Visualize o Viewport e o Tamanho da Tela em Tempo Real

Precisa saber o tamanho do seu viewport ou verificar breakpoints? A ferramenta Browser Dimensions mostra as dimensões do viewport, janela e tela em tempo real — e atualiza automaticamente à medida que você redimensiona. Todos os valores são lidos do seu navegador; nenhum dado é enviado a nenhum servidor.

Exemplo: Abra a ferramenta e redimensione a janela do seu navegador. Observe os valores do viewport (interno) e da janela (externo) atualizarem ao vivo. Copie a saída JSON completa para documentar dimensões para especificações de design ou depuração.

O que são Browser Dimensions?

As dimensões do navegador são as medições em pixels da janela do seu navegador e da tela. O viewport é a área visível para o conteúdo da web (excluindo a barra de endereços e as barras de rolagem). A janela inclui todo o chrome do navegador. A tela reflete sua exibição física. Compreender essas diferenças ajuda no design responsivo, consultas de mídia e na depuração de problemas de layout.

A ferramenta Tooladex Browser Dimensions lê esses valores diretamente das APIs JavaScript do seu navegador. Tudo é executado localmente; nada é enviado ou armazenado.

Por que usar uma ferramenta de Browser Dimensions?

Design responsivo — Verifique breakpoints e o comportamento de consultas de mídia em diferentes tamanhos de viewport. Redimensione a janela e veja exatamente quando os layouts mudam.

Depuração de CSS — Quando 100vw ou 100vh se comportam de forma inesperada (por exemplo, deslocamento da barra de rolagem), verifique as dimensões reais do viewport.

Documentação — Capture tamanhos de viewport para especificações de design, guias de teste ou relatórios de bugs. Copie a saída JSON para fácil compartilhamento.

Teste de dispositivos — Compare dimensões entre diferentes dispositivos, níveis de zoom e configurações de navegador. A proporção de pixels do dispositivo e a profundidade de cor estão incluídas.

Como a ferramenta Browser Dimensions funciona

  1. Abra a ferramenta no seu navegador. As dimensões carregam automaticamente.
  2. Redimensione a janela — os valores atualizam em tempo real. Nenhum refresh é necessário.
  3. Revise os cartões — As dimensões do Viewport (interno), Janela (externo) e Tela são mostradas com seus respectivos nomes de propriedades JavaScript.
  4. Copie o JSON — Clique em "Copy JSON" para copiar todas as dimensões em um formato estruturado.

Viewport vs Janela vs Tela

Viewport (interno) — window.innerWidth × window.innerHeight. A área visível para o conteúdo da web. Exclui a barra de endereços, barras de ferramentas e barras de rolagem. Isso é o que as consultas de mídia CSS e 100vw / 100vh normalmente referenciam.

Janela (externo) — window.outerWidth × window.outerHeight. A janela completa do navegador, incluindo o chrome. Útil para testar o dimensionamento da janela ou o comportamento em tela cheia.

Tela — screen.width × screen.height. A resolução da sua exibição física. screen.availWidth e screen.availHeight excluem a barra de tarefas e outras interfaces de usuário do sistema operacional.

Perguntas Frequentes

Por que o viewport difere da janela?
O viewport exclui a interface do usuário do navegador (barra de endereços, abas, barras de rolagem). A janela inclui tudo. No mobile, a barra de endereços muitas vezes se oculta ao rolar, então o viewport pode mudar.

O que é a proporção de pixels do dispositivo?
A proporção de pixels do dispositivo (DPR) é a razão entre pixels físicos e pixels CSS. Em displays Retina ou de alta DPI, o DPR pode ser 2 ou 3 — um pixel CSS corresponde a múltiplos pixels físicos. Isso afeta a nitidez da imagem e a renderização de bordas de 1px.

Meus dados são enviados para algum lugar?
Não. Todos os valores de dimensão são lidos localmente no seu navegador. Nada é enviado ou armazenado.

Privacidade

Todo o processamento ocorre no seu navegador. Não enviamos nem armazenamos nenhum dado de dimensão.

Experimente a ferramenta Browser Dimensions

Browser Dimensions

View your browser viewport, window, and screen dimensions in real time. Perfect for responsive design, breakpoint testing, and CSS media queries. Updates as you resize.

Try Tool Now

The Browser Dimensions tool is free, works in your browser, and requires no sign-up. Open it, resize your window, and get live viewport, window, and screen dimensions — perfect for responsive design and breakpoint testing.

Related Tools