tela retina hidpi e dpr
"Retina" é o nome de marketing que a Apple deu às telas HiDPI, aquelas em que o devicePixelRatio é 2 ou mais: nelas, cada pixel CSS do layout é desenhado usando uma grade de vários pixels físicos, ganhando nitidez sem que nada na página pareça menor. Esta página mostra a matemática por trás dessa grade em DPR 1, 2 e 3.
É a configuração de monitores de escritório mais antigos e de boa parte dos monitores externos vendidos até hoje: nenhuma multiplicação acontece entre o layout CSS e o painel físico.
É o DPR mais comum em notebooks Retina e na maioria dos smartphones de gama média, dobrando a densidade em cada eixo sem alterar o tamanho visual do conteúdo.
DPR 3 é comum em telas de celular de alta densidade compactas; nesses aparelhos, uma imagem `1x` normal aparece visivelmente borrada e só a versão `3x` do `srcset` preenche a grade completa.
Viewport é a área visível da página no navegador, medida em CSS pixels. Ela muda ao redimensionar a janela, abrir barras laterais, alterar zoom ou girar o dispositivo.
Não necessariamente para a experiência do usuário: um DPR mais alto exige mais dados de imagem para não borrar (uma imagem `3x` tem nove vezes mais pixels que a `1x` equivalente), o que aumenta o peso da página e o consumo de bateria para renderizar cada frame, então o ganho de nitidez precisa ser balanceado contra performance.
Não: DPR depende da relação entre pixels físicos e o fator de escala configurado no sistema operacional, não só da resolução nominal. Um monitor 4K de 27 polegadas rodando sem escala no Windows pode reportar DPR 1 com pixels CSS minúsculos, enquanto o mesmo painel com escala de 200% reporta DPR 2.
Esta ferramenta lê `window.devicePixelRatio` diretamente no seu navegador e mostra o valor na tela; não existe um jeito confiável de adivinhar o DPR pelo modelo do aparelho de fora para dentro, porque o mesmo hardware pode reportar valores diferentes dependendo da escala do sistema operacional escolhida pelo usuário.
Porque a câmera captura na resolução física total do sensor, muito acima da resolução em pixels CSS da tela; ao exibir essa foto em tamanho reduzido na página, o navegador tem pixels físicos de sobra para preencher a grade do DPR sem esticar nada, e por isso ela parece nítida mesmo ocupando pouco espaço em CSS.
As medidas são lidas localmente pelas APIs do navegador e não identificam sua tela de forma única.