css pixels e device pixel ratio
screen.width e screen.height descrevem a tela inteira em pixels CSS, window.innerWidth mede só a viewport visível dentro do navegador, e devicePixelRatio (DPR) conta quantos pixels físicos o monitor usa para desenhar um único pixel CSS. Essa calculadora expõe os três números lado a lado para acabar com a confusão entre eles.
DPR 1 é o padrão em monitores externos mais antigos e em boa parte dos monitores de escritório: cada pixel CSS do layout corresponde a exatamente um pixel físico do painel, sem nenhum reescalonamento pelo navegador.
Multiplicar a largura da viewport pelo DPR dá a contagem de pixels físicos que o painel realmente acende para desenhar aquela viewport, útil para saber que resolução de imagem exportar sem desperdiçar banda.
Telas de celular topo de linha costumam usar DPR 3, então uma imagem `srcset` com descritor `3x` precisa ter três vezes a largura em pixels do elemento para não borrar em zoom.
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.
Sim: aumentar o zoom da página eleva o DPR relatado pelo navegador na mesma proporção, porque o zoom redesenha o conteúdo com mais pixels físicos por pixel CSS; é por isso que devicePixelRatio deve ser lido de novo a cada evento de resize, nunca guardado em cache no carregamento da página.
Porque esses descritores dizem ao navegador para escolher a imagem certa conforme o DPR do dispositivo sem que o CSS precise mudar: numa tela DPR 2, o navegador baixa a versão marcada `2x`, que tem o dobro de pixels físicos da versão base, mantendo a nitidez sem redimensionar a imagem em tempo real.
Podem, quando o navegador está maximizado sem nenhuma barra lateral do sistema operacional visível, mas normalmente window.innerWidth é menor, porque desconta a área de barras de rolagem e a moldura do próprio navegador; nunca assuma que os dois valores coincidem em produção.
Serve para aplicar CSS condicional a telas de alta densidade sem depender de JavaScript no runtime: a media query `min-resolution` compara diretamente o DPR do dispositivo contra o limiar informado, permitindo trocar background-image por uma versão de maior resolução só quando o painel realmente tem pixels físicos suficientes para aproveitá-la.
As medidas são lidas localmente pelas APIs do navegador e não identificam sua tela de forma única.