Qual é a minha resolução de tela?

Qual é a minha resolução de tela?

O painel acima mostra o que o seu navegador informa sobre a sua tela, junto de outros cinco retângulos que ele também acompanha. Se você quer só o número principal, é o primeiro. E se quer saber se aquele número é a sua resolução real de hardware, a resposta honesta é que o seu navegador não é obrigado a lhe contar — e esta página mostra exatamente de onde vem essa incerteza em vez de encobri-la.

Uma resolução de tela é uma contagem de pixels: 1920 na horizontal por 1080 na vertical é o monitor de mesa mais comum do mundo. A complicação é que navegadores não medem em pixels de hardware. Eles medem em pixels CSS, uma unidade propositalmente desacoplada do painel para que uma página tenha mais ou menos o mesmo tamanho físico num celular, num notebook e numa televisão. Numa tela rodando a 200% de dimensionamento, um pixel CSS cobre dois pixels de hardware em cada direção, e o navegador informa metade dos números que a ficha técnica traz.

É por isso que um notebook 4K de 3840 de largura muitas vezes informa 1920. Não é bug e nada está quebrado — é a unidade fazendo o trabalho dela.

Como ler os resultados

1. Comece pelo número grande. É screen.width por screen.height, em pixels CSS. Para a maioria das pessoas, com a tela a 100% de dimensionamento, ele é a resolução do hardware e nada mais precisa ser feito.
2. Compare os seis retângulos. Cada um é uma medida diferente e os vãos entre eles têm significado: a moldura do navegador, a barra de rolagem, a barra de tarefas, o zoom por pinça. Redimensione a janela e veja quais linhas se mexem.
3. Leia a estimativa e a ressalva dela. Multiplicar pela proporção de pixels dá um palpite dos seus pixels de hardware, e a lista abaixo mostra todas as combinações de dimensionamento e zoom que produziriam exatamente a mesma proporção.

Seis retângulos, e toda ferramenta confunde alguns

A especificação CSSOM View define cada um separadamente, e eles são coisas genuinamente diferentes. screen.width é a tela inteira. screen.availWidth é a tela menos o que o sistema operacional reserva — a barra de tarefas do Windows, a barra de menus e o dock do macOS. outerWidth é a janela do navegador com as barras dele. innerWidth é o viewport, a área em que uma página consegue de fato desenhar, e inclui a barra de rolagem. document.documentElement.clientWidth é esse mesmo viewport sem a barra, então a diferença entre essas duas linhas é literalmente a largura da sua barra de rolagem. E visualViewport é a parte que você enxerga agora, que é o que muda ao dar zoom com dois dedos num celular ou quando um teclado sobe na tela.

Quase toda a confusão em relatos de bug vem de comparar dois destes como se fossem um. Um layout que quebra «em 1280» pode quebrar com uma janela de 1280, com um viewport de 1280 ou com uma tela de 1280 com uma janela mais estreita dentro, e esses são três testes diferentes.

Vê-los se mexer é o jeito mais rápido de internalizar isso. Estreite esta janela e as quatro últimas linhas mudam enquanto as duas primeiras não; abra as ferramentas de desenvolvimento encaixadas ao lado e as linhas do viewport encolhem enquanto as da janela ficam paradas.

Por que o navegador não consegue informar a resolução do seu hardware

Há duas razões distintas, e as duas estão escritas na especificação em vez de serem manias de um navegador específico.

A primeira é que o navegador tem permissão para inventar o número. O módulo CSSOM View define screen.width como a largura da «área de tela exposta à web», e define essa área como «um dos seguintes: a área do dispositivo de saída, em pixels CSS; a área do viewport, em pixels CSS». Um navegador que lhe entregue o tamanho da própria janela em vez do tamanho do seu monitor está plenamente em conformidade. E isso é deliberado: a seção 15 do mesmo documento afirma que a interface Screen «pode ser usada como entrada de algoritmos de impressão digital» e que os agentes de usuário «podem optar por ocultar ou quantizar informações sobre o tamanho ou a configuração da tela» para proteger o usuário. Navegadores e modos endurecidos contra rastreamento fazem exatamente isso. Vale notar que a MDN descreve a propriedade como simplesmente «a largura da tela em pixels CSS», que é a primeira opção da especificação apresentada como se fosse a única.

A segunda razão derruba o atalho óbvio. Multiplicar o tamanho CSS por devicePixelRatio parece que deveria recuperar os pixels de hardware, e a própria definição da especificação impede: essa proporção é o tamanho de um pixel CSS «no zoom de página atual» dividido pelo tamanho de um pixel do dispositivo. O zoom da página vai embutido no mesmo número que o dimensionamento da tela. Uma proporção de 2 significa uma tela de alta densidade a 100% de zoom, ou uma tela comum a 200%, e nenhum JavaScript consegue dizer qual — aperte Ctrl e mais algumas vezes e veja a estimativa acima mudar enquanto o seu monitor não muda.

Um detalhe pequeno da mesma frase, já que quase nada o menciona: a proporção é definida usando o tamanho vertical de um pixel do dispositivo especificamente. Numa tela hipotética com pixels não quadrados, a medida horizontal não seria a que você recebeu.

Os nomes, e os que estão errados

A proporção acima é reduzida de forma exata, o que revela mais do que parece. 1366×768, o painel de notebook mais comum por quase uma década, é rotineiramente chamado de 16:9 e não é: reduzido, é 683:384, porque 16:9 de 768 dá 1365,33 e não dá para ter um terço de pixel. Fica a 0,05%, então ninguém percebe, mas não é a mesma forma.

Os monitores ultrawide vendidos como 21:9 ficam mais longe e nem sequer batem entre si. 2560×1080 é 64:27 e 3440×1440 é 43:18 — a 1,6% e 2,4% de 21:9 respectivamente, e com formas diferentes uma da outra apesar de dividirem o rótulo de marketing. Do mesmo jeito, 1280×1024 é exatamente 5:4 e não o 4:3 que a época dele sugere, e é por isso que as fotos saíam esticadas naqueles monitores.

«4K» nomeia duas coisas diferentes. 3840×2160, a das televisões e monitores, é exatamente 16:9 e se chama propriamente UHD. 4096×2160, a do cinema, é 256:135 — uma forma genuinamente diferente, a 6,7% de 16:9. A ferramenta nomeia as duas corretamente em vez de tratar 4K como uma resolução só. E embora o nome sugira quatro mil de alguma coisa, o que é de fato verdade sai mais útil: UHD tem exatamente quatro vezes os pixels do Full HD.

Por que é grátis?

Tudo aqui é medido pelo seu próprio navegador e exibido na hora. Nenhuma medida é enviada a lugar nenhum, nada é registrado e não há conta a criar — a página não nos custa nada por visitante além de alguns kilobytes de JavaScript.

Sem cadastro, sem limites e sem marca d'água em nada que você copiar.