Verificador de Resolução de Tela

Tela, viewport e pixels físicos

Três tamanhos diferentes são fáceis de confundir. O tamanho da tela (screen.width e screen.height) é o monitor inteiro como o navegador o informa, em pixels CSS. O viewport (window.innerWidth e innerHeight) é só a parte dessa tela onde a página é desenhada, então muda com o tamanho da janela, barras e zoom. A resolução física é o número real de pixels do painel, e o navegador não a informa diretamente.

Por isso esta ferramenta a estima como pixels CSS vezes o devicePixelRatio. Em um monitor comum de 1920 por 1080 com escala de 100%, as três visões coincidem. Em um celular ou em um notebook com escala elas não coincidem, e isso é esperado, não um defeito.

• Tela = screen.width e screen.height, em pixels CSS.
• Viewport = window.innerWidth e innerHeight, em pixels CSS.
• DPR = window.devicePixelRatio, os pixels físicos atrás de um pixel CSS.
• Resolução física estimada = tamanho da tela vezes DPR, arredondado.

Um notebook com escala no Windows e um celular de alta densidade

Exemplo 1, um notebook com painel de 1920 por 1080 e escala do Windows em 125%: o navegador informa uma tela de 1536 por 864 pixels CSS e DPR 1,25. Multiplicando, dá 1920 por 1080, que esta ferramenta chama de Full HD. O texto fica maior que em escala de 100% porque cada pixel CSS é desenhado com 1,25 pixel físico.

Exemplo 2, um celular que informa 390 por 844 pixels CSS com DPR 3: a resolução física estimada é 1170 por 2532. A página é montada para 390 pixels, mas o painel usa 1170 pixels reais de largura, por isso texto e imagens parecem mais nítidos que em uma tela de desktop com a mesma largura CSS.

Taxa de atualização, densidade de pixels e breakpoints

A taxa de atualização é medida, não lida: o navegador não tem uma API que a informe, então a ferramenta conta quadros de animação por cerca de dois segundos e usa o intervalo mediano. O resultado reflete o que o navegador está desenhando de fato, que pode ser menos do que o monitor suporta.

A densidade de pixels depende da diagonal física, que nenhum navegador consegue saber, então você a informa. Com a diagonal e a resolução, a ferramenta calcula o PPI, a largura e a altura físicas e uma distância de visualização baseada na regra aproximada de que um pixel ocupa um arcminuto. Para design responsivo, os breakpoints do CSS reagem à largura do viewport em pixels CSS, então o painel de breakpoints compara o seu viewport com os padrões do Tailwind e do Bootstrap.

• Taxa de atualização: medida com quadros de animação e arredondada para um valor comum.
• PPI: diagonal em pixels dividida pela diagonal em polegadas.
• Distância de visualização: cerca de 3438 dividido pelo PPI, em polegadas.
• Breakpoints: Tailwind sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Bootstrap sm 576, md 768, lg 992, xl 1200, xxl 1400.