isso é mencionado em todos os artigos sobre a Web para dispositivos móveis, mas em nenhum lugar posso encontrar uma explicação sobre o que exatamente esse atributo mede.
Alguém por favor pode elaborar o que consultas como esta checam?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Resposta curta

A proporção de pixels do dispositivo é a proporção entre pixels físicos e pixels lógicos. Por exemplo, o iPhone 4 e o iPhone 4S relatam uma taxa de pixels do dispositivo de 2, porque a resolução linear física é o dobro da resolução linear lógica.

• Resolução física: 960 x 640
• Resolução lógica: 480 x 320

A fórmula é:

Onde:

é a resolução física linear

e:

é a resolução linear lógica

Outros dispositivos relatam diferentes proporções de pixel de dispositivo, incluindo não-inteiros. Por exemplo, o Nokia Lumia 1020 reporta 1.6667, o Samsumg Galaxy S4 reporta 3 e o Apple iPhone 6 Plus reporta 2.46 (fonte: dpilove ) . Mas isso não muda nada em princípio, pois você nunca deve projetar para nenhum dispositivo específico.

Discussão

O "pixel" do CSS nem mesmo é definido como "um elemento de imagem em alguma tela", mas como uma medida angular não linear do ângulo de visão, que é aproximadamente uma polegada no comprimento do braço. Fonte: Comprimentos absolutos do CSS

Isso tem muitas implicações quando se trata de web design, como preparar recursos de imagem de alta definição e aplicar cuidadosamente imagens diferentes em diferentes proporções de pixels de dispositivos. Você não gostaria de forçar um dispositivo low-end a baixar uma imagem de resolução muito alta, apenas para reduzi-la localmente. Você também não deseja que os dispositivos de ponta aprimorem as imagens de baixa resolução para uma experiência borrada do usuário.

Se você estiver preso com imagens de bitmap, para acomodar diversas proporções de pixels de dispositivos diferentes, use as Consultas de mídia CSS para fornecer conjuntos diferentes de recursos para diferentes grupos de dispositivos. Combine isso com bons truques background-size: coverou defina explicitamente os background-sizevalores de porcentagem.

Exemplo

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

Dessa forma, cada tipo de dispositivo carrega apenas o recurso de imagem correto. Lembre-se também de que a pxunidade em CSS sempre opera em pixels lógicos .

Um caso para gráficos vetoriais

À medida que mais e mais tipos de dispositivos aparecem, fica mais difícil fornecer a todos eles recursos de bitmap adequados. Atualmente, em CSS, as consultas de mídia são a única maneira e, em HTML5, o elemento picture permite usar fontes diferentes para consultas de mídia diferentes, mas o suporte ainda não é 100%, já que a maioria dos desenvolvedores da Web ainda precisa oferecer suporte ao IE11 por mais algum tempo ( fonte: caniuse ) .

Se você precisar de imagens nítidas para ícones, arte de linha e elementos de design que não sejam fotos , comece a pensar no SVG, que se adapta perfeitamente a todas as resoluções.

Proporção de pixels do dispositivo == Proporção de pixels CSS

No mundo do desenvolvimento web, a proporção de pixels do dispositivo (também chamada de CSS Pixel Ratio) é o que determina como a resolução da tela de um dispositivo é interpretada pelo CSS.

O CSS de um navegador calcula a resolução lógica (ou interpretada) de um dispositivo pela fórmula:

Por exemplo:

Apple iPhone 6s

• Resolução real: 750 x 1334
• Proporção de pixels CSS: 2
• Resolução lógica:

Ao visualizar uma página da Web, o CSS achará que o dispositivo possui uma tela de resolução de 375x667 e as Consultas de Mídia responderão como se a tela tivesse 375x667 . Mas os elementos renderizados na tela serão duas vezes mais nítidos que uma tela real de 375x667, porque há o dobro de pixels físicos na tela física.

Alguns outros exemplos:

Samsung Galaxy S4

• Resolução real: 1080 x 1920
• Proporção de pixels CSS: 3
• Resolução lógica:

iPhone 5s

• Resolução real: 640 x 1136
• Proporção de pixels CSS: 2
• Resolução lógica:

Por que existe a proporção de pixels do dispositivo?

A razão pela qual a proporção de pixels CSS foi criada é porque, quando as telas dos telefones obtêm resoluções mais altas, se todos os dispositivos ainda tiverem uma proporção de pixels CSS de 1, as páginas da Web ficam muito pequenas para serem visualizadas.

Um típico monitor de tela cheia é de aproximadamente 24 "com resolução de 1920x1080. Imagine se esse monitor tivesse diminuído para cerca de 5", mas tivesse a mesma resolução. Visualizar coisas na tela seria impossível porque seriam muito pequenas. Mas os fabricantes estão lançando telas de telefone com resolução de 1920x1080 de forma consistente agora.

Portanto, a proporção de pixels do dispositivo foi inventada pelos fabricantes de telefones para que eles pudessem continuar aumentando a resolução, a nitidez e a qualidade das telas dos telefones, sem tornar os elementos na tela muito pequenos para serem vistos ou lidos.

Aqui está uma ferramenta que também informa a densidade de pixels do seu dispositivo atual:

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Fornece o número de pixels do dispositivo por pixel CSS.

isso é quase autoexplicativo. o número descreve a proporção de quantos pixels "reais" (pixerls físicos da tela) são usados ​​para exibir um pixel "virtual" (tamanho definido em CSS).

O artigo de Boris Smus Imagens de alta DPI para densidades variáveis ​​de pixels tem uma definição mais precisa da proporção de pixels do dispositivo: o número de pixels do dispositivo por pixel CSS é uma boa aproximação, mas não a história toda.

Observe que você pode obter o DPR usado por um dispositivo com window.devicePixelRatio.