Diagnósticos rápidos de dispositivos

Teste de DPI da Tela: Veja DPR, Viewport, Resolução e Por Que a Tela Parece com Zoom

Veja device pixel ratio, DPI estimado, resolução da tela e tamanho do viewport para entender escala, zoom do navegador, comportamento Retina e por que layouts mudam entre telas.

Resumo da tela

DPI da tela e proporção de pixels

Revise resolução da tela, proporção de pixels e DPI estimado.

O DPI é uma estimativa baseada na proporção de pixels, não uma medida física.

Tela

Resolução da tela--
Pixels do dispositivo--
Profundidade de cor--
Profundidade de pixels--

Área visível

Tamanho do viewport--

Densidade

Proporção de pixels do dispositivo--
DPI estimado--

Por que usar este teste de DPI da tela online

Este teste de DPI da tela é mais útil quando um site parece ampliado demais, o texto fica pequeno demais, screenshots parecem borrados ou o mesmo layout se comporta de forma diferente entre dispositivos. Em vez de adivinhar, você consegue comparar device pixel ratio, DPI estimado, resolução da tela e viewport no mesmo lugar. Isso torna a página útil para designers, desenvolvedores frontend, QA, suporte e qualquer pessoa que precise explicar por que uma tela Retina ou HiDPI renderiza diferente de um display padrão.

O que esta ferramenta realmente mede

A ferramenta lê valores do navegador como window.devicePixelRatio, resolução da tela, tamanho do viewport e profundidade de cor. A partir disso, calcula um DPI estimado dentro do contexto atual de escala do navegador. Isso ajuda bastante a entender CSS pixels versus device pixels, mas não é uma medição física exata da densidade do painel. Pense nela como uma ferramenta prática de diagnóstico de escala e renderização, não como um calibrador de hardware.

Por que layouts, screenshots e interface podem parecer diferentes

Uma página pode parecer diferente porque escala do sistema operacional, zoom do navegador, tamanho da janela e densidade da tela mudam o que o browser reporta. Um device pixel ratio alto costuma deixar texto e gráficos mais nítidos, mas também altera screenshots, canvas, imagens e breakpoints responsivos. Quando o viewport parece menor do que o esperado, normalmente o motivo é tamanho da janela, nível de zoom ou a própria interface do navegador, e não a resolução bruta da tela.

  • Um device pixel ratio mais alto geralmente indica tela mais densa e renderização mais nítida.
  • O DPI estimado é apenas uma aproximação baseada no que o navegador consegue ver.
  • O viewport muda com tamanho da janela, zoom, orientação e interface do navegador.
  • A escala do sistema operacional pode fazer o mesmo hardware parecer diferente no nível do navegador.
  • Esta ferramenta é mais forte para depurar escala e layout do que para certificar DPI físico exato.

O que este resultado ajuda a diagnosticar

Use esta página para comparar notebook e monitor externo, entender por que um site parece grande demais, descobrir por que uma screenshot fica suave em um dispositivo e nítida em outro, ou confirmar se zoom e DPR estão mudando seu layout responsivo. Tudo roda localmente no navegador e nenhum dado pessoal é armazenado.

Ferramentas relacionadas

Perguntas Frequentes

O que este teste de DPI da tela mostra?

Ele mostra device pixel ratio, DPI estimado, resolução da tela, tamanho do viewport, profundidade de cor e outros valores visíveis para o navegador. Juntos, esses números ajudam a explicar escala, zoom e diferenças de renderização.

Isso mede o DPI físico exato do hardware?

Não. O valor de DPI aqui é uma estimativa derivada de valores reportados pelo navegador e do contexto atual de escala. Ele é útil para diagnóstico prático, mas não é uma medição física precisa do painel.

O que é device pixel ratio e por que isso importa?

Device pixel ratio mostra quantos pixels físicos correspondem a um CSS pixel. Isso importa porque muda a aparência de texto, imagens, canvas, screenshots e layouts responsivos.

Por que um site parece com zoom ou grande demais em uma tela?

As causas mais comuns são escala do sistema operacional, zoom do navegador, um DPR diferente ou um viewport efetivo menor. A mesma resolução pode parecer muito diferente quando o navegador reporta outro contexto de escala.

Por que o viewport parece menor do que a resolução da tela?

O viewport representa apenas a área visível dentro do navegador, não a tela física inteira. Tamanho da janela, barras do navegador, zoom, sidebars e interface mobile reduzem essa área útil.

Isso ajuda a explicar screenshots borrados ou interface suave demais?

Sim. Divergências entre device pixel ratio, tamanho de exportação da imagem, zoom do navegador e suposições sobre viewport são causas comuns de screenshots ou elementos de interface parecerem borrados em uma tela e nítidos em outra.

O zoom do navegador afeta o resultado?

Sim. O zoom pode alterar o viewport efetivo e a forma como o navegador reporta valores ligados à escala. Para comparações consistentes, teste no mesmo nível de zoom em cada dispositivo.

A escala do sistema operacional afeta o resultado?

Sim. Windows, macOS e alguns ambientes Linux aplicam escala que altera os valores vistos pelo navegador. Esse é um dos motivos de hardwares parecidos se comportarem diferente na web.

Posso usar isso para design responsivo ou testes de QA?

Sim. Ele é útil para checar viewport, DPR e contexto de tela antes de investigar breakpoints, bugs de layout, problemas de screenshot ou diferenças de renderização no frontend.

Este teste de DPI funciona em celulares e tablets?

Sim. Ele funciona em navegadores móveis modernos e ajuda a explicar comportamento Retina, HiDPI e escala em telas móveis. Os resultados podem mudar com orientação, zoom e interface do navegador.

Este teste de DPI da tela é privado?

Sim. Ele roda localmente no navegador e não envia nem armazena dados pessoais. Os valores são atualizados em tempo real enquanto a página estiver aberta.

O que este teste de DPI da tela não consegue fazer?

Ele não consegue calibrar a tela, medir o DPI físico exato do painel, corrigir problemas de escala automaticamente nem validar precisão de cor. Ele apenas mostra os valores que o navegador consegue observar.