Pular para o conteúdo
SPCXTools

Resolução de Tela

Veja instantaneamente a resolução da sua tela, o tamanho do viewport do navegador, a proporção de pixels e outros detalhes da tela.

Roda localmente — os arquivos não saem do seu dispositivo

Carregando ferramenta…

Como usar: Resolução de Tela

  1. 1Abra a página — a resolução da sua tela é exibida imediatamente no topo.
  2. 2Verifique os detalhes abaixo — resolução CSS, proporção de pixels do dispositivo, tamanho do viewport, proporção da tela, profundidade de cor e mais.
  3. 3Redimensione a janela do navegador ou gire seu dispositivo; os valores são atualizados em tempo real.
  4. 4Clique em Copiar para compartilhar todos os detalhes, por exemplo, em um relatório de bug.

Qual é a minha resolução de tela?

A resolução da sua tela é o número de pixels que seu monitor exibe horizontal e verticalmente, como 1920 × 1080. Esta ferramenta a detecta instantaneamente, juntamente com os detalhes que web designers, desenvolvedores e equipes de suporte geralmente precisam: a resolução CSS, a proporção de pixels do dispositivo, o tamanho do viewport do navegador, o espaço de tela disponível, a proporção da tela, a profundidade de cor, a gama de cores e o suporte a HDR. Tudo é lido localmente a partir do seu navegador.

Entendendo os números

A resolução física é o número real de pixels no painel (na maioria das configurações). É o que os fabricantes anunciam, por exemplo, 2560 × 1440.

Pixels CSS são as unidades lógicas que os sites usam. Quando seu sistema aplica uma escala à tela — por exemplo, 200% em uma tela Retina — um pixel CSS cobre vários pixels físicos, fazendo com que o texto permaneça em um tamanho legível e pareça mais nítido.

A proporção de pixels do dispositivo conecta os dois: pixels físicos = pixels CSS × DPR.

O Viewport é a área visível da página dentro do navegador. Ele muda sempre que você redimensiona a janela, abre as ferramentas de desenvolvedor ou exibe a barra de favoritos.

Resoluções de tela comuns

Nome Resolução Proporção da tela
HD (720p) 1280 × 720 16:9
Full HD (1080p) 1920 × 1080 16:9
WUXGA 1920 × 1200 16:10
QHD (1440p) 2560 × 1440 16:9
UWQHD (ultrawide) 3440 × 1440 21:9
4K UHD 3840 × 2160 16:9
5K 5120 × 2880 16:9

Quem precisa desta informação

Web designers e desenvolvedores testam layouts responsivos com base em tamanhos de viewport e proporções de pixels reais, e precisam deles para reproduzir relatórios de bugs de visitantes.

Equipes de suporte e TI pedem detalhes da tela ao solucionar problemas de exibição ou layout — use o botão Copiar para enviar tudo de uma vez.

Gamers e criadores de conteúdo confirmam se um novo monitor está operando em sua resolução nativa, em vez de um modo com escala ou inferior.

Qualquer pessoa comprando papéis de parede, capturas de tela ou apresentações pode combinar as imagens com o tamanho exato da sua tela para obter o resultado mais nítido.

Verifique a rapidez com que sua tela atualiza com o Teste de Taxa de Atualização ou procure por pixels defeituosos com o Teste de Dead Pixel.

Perguntas frequentes

Por que a resolução é diferente da especificação do meu monitor?
Sistemas operacionais frequentemente aplicam uma escala à interface. Um monitor de 3840 × 2160 (4K) com escala de 150% informa aos sites uma resolução "CSS" de 2560 × 1440, com uma proporção de pixels do dispositivo de 1.5. A Resolução de tela no topo multiplica esses valores de volta para obter os pixels físicos. O zoom do navegador também altera a proporção de pixels, então redefina o zoom para 100% (Ctrl/Cmd + 0) para resultados precisos.
O que é a proporção de pixels do dispositivo (DPR)?
DPR é o número de pixels físicos por pixel CSS. Um monitor padrão tem um DPR de 1; Macs com tela Retina e a maioria dos celulares têm 2 ou 3. Telas com DPR alto exibem textos e imagens mais nítidos porque cada pixel CSS é desenhado com vários pixels físicos.
O que é o viewport e por que ele é importante?
O viewport é a área dentro da janela do navegador onde as páginas da web são exibidas, excluindo barras de ferramentas e abas. Web designers o utilizam — e não o tamanho total da tela — para layouts responsivos, tornando-o o número mais útil ao relatar como um site aparece no seu dispositivo.
O que significa tamanho de tela "disponível"?
É a área da tela menos os elementos permanentes do sistema operacional, como a barra de tarefas do Windows ou a barra de menus e o Dock do macOS — o maior tamanho que uma janela pode ter sem sobrepô-los.
O HDR e a gama de cores informados são precisos?
Reflete o que o navegador informa por meio de media queries CSS. O HDR é mostrado como compatível quando a tela e o sistema operacional estão no modo HDR; a gama de cores ampla (Display P3) é comum em dispositivos Apple e em celulares e monitores recentes.