Informações da tela e do navegador

Qual tamanho de tela um site consegue consultar?

O navegador informa mais de uma dimensão útil. O tamanho da tela descreve a tela que ele informa, enquanto a área de layout é o espaço atual da página dentro da janela. Ao reduzir a janela, a tela pode continuar com as mesmas dimensões e a página passar a ter menos espaço. A API Screen usa pixels CSS, que nem sempre correspondem um a um aos pixels físicos do painel.

A área disponível da tela é o espaço que o navegador informa como disponível para janelas; elementos da interface do sistema podem torná-lo menor que a tela inteira. Para o espaço desta página, consulte a área de layout. Consulte a referência de largura disponível da MDN.

Escolha o valor certo para o que quer conferir

• Quer conferir um layout responsivo? Use a área de layout e redimensione a janela. Os valores vêm de innerWidth e innerHeight e incluem barras de rolagem.
• Quer comparar o celular antes e depois de ampliar com os dedos? Observe a área visível e sua escala. As dimensões da área visível descrevem o trecho da página em exibição, em pixels CSS, quando há suporte.
• Está mudando de monitor? Deixe a janela inteira na tela que deseja conferir. A página acompanha os eventos de tamanho, orientação e DPR disponíveis no navegador. Use Atualizar valores se a mudança ainda não aparecer.

Como o DPR relaciona pixels CSS e do dispositivo

A proporção de pixels, ou DPR, relaciona pixels do dispositivo e pixels CSS. O zoom da página pode mudar o DPR; o gesto de pinça amplia a página de outra forma. A documentação de DPR explica a diferença. Um DPR de 2 descreve dois pixels do dispositivo por pixel CSS. A diagonal física e a resolução nativa vêm da especificação da tela. A escala da área visível é uma leitura separada, não uma porcentagem confiável do ajuste de zoom do navegador.

Tela × DPR multiplica cada dimensão informada pelo navegador pela proporção atual. O resultado pode ajudar como estimativa em pixels quando a tela e a escala correspondem ao contexto esperado. Zoom da página, escala do sistema, comportamento do navegador e arredondamento impedem que ele comprove a resolução nativa do painel. Consulte a especificação da tela para saber a resolução nativa.

Encontre o tamanho físico da sua tela

Para saber a diagonal física, consulte a especificação do fabricante ou meça entre cantos opostos da área visível. Com diagonal e resolução conhecidas, a calculadora de PPI calcula a densidade e as dimensões físicas. Essa conta é diferente da leitura fornecida pelo navegador.

Copie um registro dos valores atuais

Copiar relatório registra os valores no momento do clique. Se o navegador não permitir a cópia automática, a página mostra o texto selecionado para copiar manualmente. A ferramenta não envia os valores a um servidor nem salva histórico. Ao trocar de idioma, a página equivalente faz uma nova leitura; nenhuma informação do dispositivo é levada no link.

Indisponível significa que o navegador não forneceu um valor utilizável naquele campo. O campo continua indisponível até o navegador fornecer uma leitura utilizável. Os valores podem ter casas decimais; as dimensões exibem até duas e as proporções, até quatro, com ≈ quando arredondamos. O navegador também pode reduzir a precisão ou ocultar dados da tela para proteger a privacidade, como descreve a especificação CSSOM View.

O que conferir depois

Para observar o ritmo das animações do navegador, faça o teste de FPS. Para investigar algo em uma imagem parada, use a inspeção da tela. Para entender as diferenças entre FPS do navegador, taxa de atualização e resposta dos pixels, leia o guia de medidas.