6XC

Qual É Minha Resolução de Tela?

Veja na hora sua resolução de tela, tamanho da janela do navegador, densidade de pixels, profundidade de cor e suporte a toque — com cópia em um clique.

1.066 visualizações

Resolução da tela —
Viewport do navegador—
Proporção de pixels (DPR)—
Pixels físicos—
Profundidade de cor—
Orientação—
Toque—

Redimensione a janela — os valores do viewport são atualizados em tempo real.

O Que a "Relação de Pixels do Dispositivo" Realmente Mede

Toda tela tem uma grade fixa de pixels físicos — sua resolução nativa —, mas as páginas web são organizadas em pixels CSS, uma unidade independente de resolução. A relação de pixels do dispositivo (DPR, device pixel ratio) é o fator de conversão entre os dois: quantos pixels físicos são usados para desenhar um único pixel CSS. Em uma tela de densidade padrão, o DPR é 1 e os dois coincidem um para um. Em uma tela "Retina" ou de alto DPI, o DPR é tipicamente 2 ou 3, o que significa que um pixel CSS é na verdade renderizado em um bloco de 2×2 (4 pixels físicos) ou 3×3 (9 pixels físicos). É por isso que o texto e os ícones parecem visivelmente mais nítidos nessas telas: o sistema operacional e o navegador têm quatro ou nove vezes mais pontos físicos disponíveis para desenhar o mesmo pixel lógico, então curvas e bordas não precisam ser aproximadas de forma tão grosseira.

Esta página lê esse número, junto com tudo mais no card acima, diretamente de APIs reais do navegador: window.screen reporta a largura, altura e profundidade de cor nativas da tela, enquanto window.devicePixelRatio reporta a relação entre pixels CSS e físicos. As medidas da viewport do navegador vêm de window.innerWidth/innerHeight, e é por isso que esse número é menor que a resolução da tela — ele exclui o espaço ocupado por abas, barra de endereço e bordas da janela. Redimensione a janela e esses valores se atualizam ao vivo, porque são lidos diretamente do navegador, não armazenados em cache.

Onde Essas Informações São Úteis

Usos típicos incluem descrever sua configuração exata ao suporte técnico sem chutar números, verificar quais dimensões de pixel um design responsivo realmente terá que trabalhar no seu dispositivo, confirmar que um monitor recém-conectado negociou sua resolução nativa e não um modo de fallback inferior, ou verificar se uma TV conectada como segunda tela captou o sinal correto. O botão de copiar com um clique pega um resumo em texto limpo de todos os valores, pronto para colar direto em um chamado de suporte ou relatório de bug.

A profundidade de cor, também exibida no card, funciona com um princípio parecido de canal por canal, como a relação de pixels: uma tela típica de 24 bits aloca 8 bits para cada um dos canais vermelho, verde e azul, resultando em aproximadamente 16,7 milhões de cores possíveis por pixel, enquanto algumas telas profissionais e HDR reportam profundidade de 30 ou 36 bits para gradientes mais finos. A orientação (retrato ou paisagem) e o suporte a toque completam o quadro, ambos lidos ao vivo das mesmas interfaces window.screen e navigator, em vez de deduzidos a partir das dimensões da tela ou de sniffing de user-agent.

Perguntas Frequentes

Por que a viewport do meu navegador é menor que minha resolução de tela?

A viewport é apenas a área de desenho interna do navegador — abas, barra de endereço, barra de favoritos e a moldura da janela ocupam cada um a sua parte da tela. Entrar em tela cheia remove a maior parte dessa sobrecarga, aproximando bastante os dois números.

O que a relação de pixels do dispositivo realmente significa na prática?

É quantos pixels físicos representam um pixel CSS. Uma relação de 2 significa que uma página de "1000 px" de largura em CSS é na verdade desenhada usando 2000 pixels físicos de largura — essa superamostragem é o que faz o texto e os ícones parecerem nítidos em telas de classe Retina.

Por que a resolução informada não corresponde à ficha técnica do meu monitor?

É o escalonamento de exibição do sistema operacional. A 150% de escala, por exemplo, um painel físico de 2880 pixels de largura informa 1920 pixels lógicos às páginas web. O painel continua usando cada pixel físico que possui — o sistema operacional só está desenhando tudo maior para manter o texto legível.

window.screen e window.devicePixelRatio são confiáveis entre navegadores?

Sim — são APIs de navegador padrão e com suporte de longa data, embora window.screen reflita a tela física completa enquanto os valores da viewport reflitam apenas a janela atual do navegador, então os dois números responderem perguntas diferentes é esperado, não um bug.

Esta ferramenta consegue detectar se minha tela suporta entrada por toque?

Sim — ela verifica a capacidade de entrada por toque através do suporte a eventos de pointer e touch do navegador, o que permite ao card informar se sua tela atual tem suporte a toque junto com sua resolução e profundidade de cor.

Comentários

Ainda não há comentários — seja o primeiro a escrever um!

Ferramentas Semelhantes

Testador de Teclado Pressione qualquer tecla e veja-a registrar instantaneamente — nome da tecla, código e um registro em tempo real. Encontre teclas mortas, travadas ou que digitam duplicado em segundos. Usar Teste de Microfone Verifique seu microfone em segundos: permita o acesso e veja o medidor de nível e a forma de onda ao vivo reagirem à sua voz. Nada é gravado ou enviado. Usar Gravador de Voz Online Grave áudio direto no navegador e baixe como arquivo — sem instalação, sem cadastro, e a gravação nunca sai do seu dispositivo. Usar Teste de Pixel Morto Percorra cores sólidas em tela cheia — vermelho, verde, azul, branco, preto — e detecte pixels mortos ou travados em qualquer monitor, notebook, celular ou TV. Usar