Qual é a resolução da minha tela – Detectar o tamanho da tela

Your screen resolution

Share X / Twitter Facebook LinkedIn WhatsApp

Como usar Qual é a resolução da minha tela

Abra a página — suas dimensões aparecem automaticamente.
Leia a resolução da tela, o tamanho da janela e a proporção de pixels.
Use o tamanho da janela de visualização para um design responsivo — é a isso que seu layout responde, não a tela.
Verifique a proporção de pixels para verificar a nitidez da imagem em telas de alto DPI.

O que é Qual é a resolução da minha tela?

Essa ferramenta exibe a resolução da tela e as dimensões relacionadas: a resolução total da tela (por exemplo, 1920 x 1080), o tamanho atual da janela do navegador (que geralmente é menor) e a proporção de pixels do dispositivo (quantos pixels físicos são mapeados para cada pixel CSS, relevante para telas "Retina" de alto DPI). Ele responde "qual é a resolução da minha tela?" e os detalhes de janela/pixel que o trabalho de design e suporte geralmente precisa.

Esses números são mais importantes do que parecem: o web design responde a eles, o suporte diagnostica problemas de layout com eles, e a distinção entre tamanho da tela, tamanho da janela e proporção de pixels confunde até os desenvolvedores.

Sobre o Qual é a resolução da minha tela

Abra a página e leia as dimensões da tela e da janela instantaneamente.

O que ela mostra e por quê: resolução da tela — as dimensões totais em pixels do seu monitor/tela; tamanho da janela do navegador (janela de visualização) — o espaço real que seu conteúdo da web possui, que é menor que a tela (barras de ferramentas, barras de tarefas, janelas não maximizadas) e é ao qual o design responsivo realmente responde; e proporção de pixels do dispositivo — em telas de alto DPI (Retina, telefones modernos), cada pixel CSS tem 2 ou 3 pixels físicos, e é por isso que as imagens precisam ter uma resolução maior do que o tamanho da tela para parecerem nítidas.

Quem usa: web designers e desenvolvedores — testando layouts responsivos, entendendo a diferença entre tela e janela de visualização (uma confusão comum — você projeta para a janela de visualização, não para a tela) e verificando a proporção de pixels para nitidez da imagem; suporte — diagnosticar problemas de “o layout parece errado” onde a resolução ou o zoom são a causa; e qualquer pessoa curiosa sobre as especificações de exibição. O ângulo da privacidade: assim como o navegador e o agente do usuário, a resolução da tela é visível automaticamente para todos os sites e contribui para a impressão digital. Ferramentas relacionadas: O que é meu navegador, O que é meu agente de usuário e nosso Simulador de resolução de tela (para testar a aparência de um site em outras resoluções).

Perguntas Frequentes

A resolução da tela são as dimensões totais em pixels da sua tela; O tamanho da janela (janela de visualização) é o espaço real que seu conteúdo da web possui - menor, por causa de barras de ferramentas, barras de tarefas e janelas não maximizadas. O design responsivo responde ao VIEWPORT, não à tela.

Quantos pixels físicos são mapeados para cada pixel CSS – 1 em monitores padrão, 2-3 em alto DPI (Retina, telefones modernos). É por isso que as imagens precisam ter o dobro do tamanho de exibição para parecerem nítidas nas telas Retina; uma imagem de 400px é exibida com nitidez apenas se for realmente de 800px em uma tela de 2×.

O design responsivo adapta os layouts ao espaço disponível (viewport), portanto, conhecer os tamanhos do mundo real ajuda você a projetar para usuários reais. E a proporção de pixels determina as necessidades de resolução da imagem. Projetar para a janela de visualização (não para tamanhos de tela assumidos) é o princípio responsivo.

Porque a janela do navegador não usa a tela inteira - a barra de tarefas/dock do sistema operacional, as barras de ferramentas do navegador e a barra de endereço e qualquer janela não maximizada reduzem o espaço que o conteúdo realmente ocupa. A janela de visualização é o que resta para sua página da web.

Sim – automaticamente, como seu navegador e agente de usuário. Ele é usado para fornecer layouts apropriados de forma legítima, mas também contribui para a impressão digital do navegador. É um dos sinais que cada site que você visita pode ler sobre o seu dispositivo.