Como usar
- Abra a página. Os valores são lidos imediatamente pelo navegador.
- Redimensione a janela ou gire o dispositivo para ver o tamanho e a orientação da área de visualização serem atualizados.
- Use “Copiar tudo” para colar os detalhes em um relatório de erro ou solicitação de suporte.
Como funciona
Os navegadores informam as dimensões em pixels CSS, a unidade que as páginas da web usam para o layout. Em telas de alta densidade, cada pixel CSS é desenhado com vários pixels físicos: a proporção de pixels do dispositivo (DPR) indica quantos. Um celular que informa 390 × 844 com DPR 3 tem uma tela com cerca de 1170 × 2532 pixels do dispositivo. Em computadores, o zoom do navegador e a escala de exibição do sistema operacional alteram o DPR e o tamanho em pixels CSS; por isso, um monitor de 2560 × 1440 com escala de 125 % informa 2048 × 1152.
A resolução da tela corresponde à tela inteira; o espaço disponível exclui barras permanentes do sistema operacional, como a barra de tarefas do Windows ou a barra de menus do macOS; a área de visualização é a parte da janela do navegador onde a página é exibida, sem as barras de ferramentas, mas incluindo qualquer barra de rolagem. É a área de visualização que responde a consultas de mídia CSS, como min-width: 768px, então esse é o valor a verificar ao testar layouts responsivos.
As opções de esquema de cores e movimento reduzido vêm dos mesmos recursos de mídia CSS que os sites usam para se adaptar às configurações do sistema. As marcas, a plataforma e o dispositivo móvel vêm das Client Hints do User-Agent, disponíveis apenas em navegadores baseados no Chromium. Alguns navegadores arredondam ou fixam esses valores intencionalmente para dificultar a identificação por impressão digital, por isso eles podem não corresponder exatamente ao seu hardware.
Exemplos
Testar um layout responsivo
Um layout apresenta problemas no notebook de um colega. Ele copia os detalhes, que mostram uma área de visualização de 1280 × 649 com DPR 1.5. Configure a barra de dispositivos do navegador com a mesma área de visualização para reproduzir o problema.
Escolher os tamanhos das imagens
Uma imagem de produto é exibida com 400 pixels CSS de largura. Em um celular com DPR 3, ela precisa de 1200 pixels para ficar nítida, o que ajuda a escolher os tamanhos a incluir em srcset.
Verificar a escala do monitor
Um monitor de 3840 × 2160 informa 2560 × 1440 com DPR 1.5: o Windows está usando escala de 150 % na tela.
Perguntas frequentes
Por que a resolução da tela é diferente da especificação do meu monitor?
Os navegadores informam pixels CSS, que correspondem aos pixels físicos divididos pelo fator de escala. Multiplique pelo DPR para obter uma estimativa da resolução do hardware. O zoom do navegador também altera o valor informado.
Qual é a diferença entre o tamanho da tela e o tamanho da área de visualização?
O tamanho da tela corresponde à tela inteira. A área de visualização é apenas a área dentro da janela do navegador onde a página é exibida; por isso, ela é menor e muda quando você redimensiona a janela ou abre as ferramentas para desenvolvedores.
Essas informações são usadas para me rastrear?
Esta página não usa essas informações para rastrear você: os valores são exibidos apenas para você e não são armazenados nem enviados a lugar algum. Os sites podem ler os mesmos valores, por isso alguns navegadores os arredondam para dificultar a identificação por impressão digital.
Por que o suporte a toque aparece no meu notebook?
O suporte a toque se baseia no número de pontos de toque informado pelo navegador. Notebooks com tela sensível ao toque informam esses pontos mesmo que você use principalmente um mouse, e alguns drivers ou configurações de área de trabalho remota informam suporte a toque mesmo sem uma tela sensível ao toque.
Privacidade
Todos os valores são lidos por JavaScript no seu navegador e exibidos apenas para você. Nada é armazenado, enviado ou incluído em análises; somente é registrado um evento anônimo indicando que a ferramenta foi aberta e usada.