Detector de Tamanho de Tela

Referência

Viewport vs resolução de tela — qual é a diferença?

O viewport é a área visível de uma página web dentro da janela do navegador, medida em pixels CSS (window.innerWidth × window.innerHeight). Muda quando você redimensiona o navegador ou abre o DevTools. A resolução de tela é a contagem total de pixels do seu display físico (screen.width × screen.height) — é fixa pelo hardware e configurações de exibição. Para design web responsivo, o viewport é o que importa — ele determina quais media queries e breakpoints CSS estão ativos.

O que é a proporção de pixels do dispositivo (DPR)?

A Proporção de Pixels do Dispositivo (DPR) indica quantos pixels físicos (do hardware) correspondem a um pixel CSS. Um DPR de 1 significa mapeamento 1:1 (telas padrão). Um DPR de 2 significa uma tela Retina/HiDPI — cada pixel CSS é renderizado com 4 pixels físicos (2×2), produzindo texto e imagens mais nítidos. Um DPR de 3 é comum em smartphones de ponta. Isso importa para: servir imagens @2x/@3x para telas com DPR alto, entender por que capturas de tela em telas Retina têm o dobro da resolução esperada, e depurar problemas de layout que aparecem apenas em valores específicos de DPR.

Casos de uso para detecção de tela

Teste de design responsivo — verifique se os breakpoints CSS disparam nas larguras corretas do viewport sem abrir o DevTools. Relatórios de bugs — compartilhe dimensões exatas do viewport, resolução de tela e DPR ao reportar problemas de exibição para desenvolvedores. Planejamento de capturas de tela — saiba as dimensões exatas antes de fazer capturas de tela para documentação ou listagens de app store. Dimensionamento de anúncios e banners — verifique se as dimensões do viewport correspondem aos tamanhos de espaço publicitário necessários.

Privacidade

As dimensões da tela são lidas localmente das APIs do seu navegador. Nenhum dado é enviado a nenhum servidor.