Viewport é a área visível da página no navegador, medida em CSS pixels. Ela muda ao redimensionar a janela, abrir barras laterais, alterar zoom ou girar o dispositivo.
Carregando ferramenta… / Loading tool…
Veja viewport, resolução, DPR, pixels físicos estimados e orientação
Browsers trabalham com CSS pixels, uma unidade lógica usada para layout, não com os pixels físicos do painel. A ponte entre os dois é o devicePixelRatio (DPR): em uma tela comum, 1 CSS pixel equivale a 1 pixel físico (DPR 1); em telas HiDPI/Retina, cada CSS pixel cobre 2, 3 ou mais pixels físicos, o que deixa texto e imagens mais nítidos sem mudar o tamanho aparente. Esta ferramenta lê o viewport em CSS pixels (window.innerWidth/innerHeight), as dimensões da tela (screen.width/height), o DPR, a orientação e a profundidade de cor, e estima os pixels físicos multiplicando CSS pixels por DPR. Por isso a resolução reportada pela página pode diferir da resolução nominal do monitor ou celular, o zoom de página, a escala do sistema e o próprio DPR alteram essa relação.
Layout na web é sempre medido em CSS pixels, uma unidade lógica pensada para manter tamanhos consistentes entre telas muito diferentes. O painel, porém, tem uma grade de pixels físicos, e o devicePixelRatio é o número que converte um no outro: pixels físicos ≈ CSS pixels × DPR. É por isso que dois aparelhos com o mesmo viewport CSS podem ter contagens de pixels físicos bem diferentes.
A ferramenta lê cada valor de uma API específica: window.innerWidth/innerHeight para o viewport, screen.width/height para a tela, window.devicePixelRatio para o DPR, screen.orientation para a orientação e screen.colorDepth para a profundidade de cor. A tela física é uma estimativa (CSS × DPR), porque o navegador pode arredondar valores ou ocultar detalhes por privacidade.
Exemplo 1, celular HiDPI: um smartphone pode reportar viewport de 390 CSS pixels de largura com DPR 3. A tela física estimada é 390 × 3 = 1170 pixels de largura. O CSS enxerga 390 para o layout, mas o painel usa 1170 pixels reais para renderizar com nitidez, por isso a imagem parece 'mais fina' que em um desktop com a mesma largura CSS.
Exemplo 2, monitor comum: um desktop 1920×1080 com DPR 1 mostra viewport e tela física praticamente iguais (descontando barras do navegador). Se você aplicar zoom de 125% na página, o viewport CSS encolhe e o DPR efetivo sobe, observe os números mudarem ao vivo ao apertar Ctrl+ e Ctrl-.
A lição prática para design responsivo: media queries CSS respondem ao viewport em CSS pixels, não à contagem de pixels físicos. Um celular com milhões de pixels físicos ainda tem um viewport CSS estreito (por volta de 360–430 px), então é esse número que decide se o layout mobile entra. Confundir os dois é a causa clássica de 'meu site quebra no celular mesmo com a tela sendo enorme'. A área disponível, por sua vez, exclui barras e docks permanentes do sistema.
Sobre privacidade: todos os valores são lidos localmente e mostrados só para você. A ferramenta não coleta canvas, fontes, áudio nem combinações invasivas, e não envia as medidas para analytics, resolução e DPR isoladamente não identificam sua tela de forma única.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/verificador-resolucao-tela"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Verificador de Resolução de Tela"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Viewport é a área visível da página no navegador, medida em CSS pixels. Ela muda ao redimensionar a janela, abrir barras laterais, alterar zoom ou girar o dispositivo.
As medidas são lidas localmente pelas APIs do navegador e não identificam sua tela de forma única.