これはモバイルWebに関するすべての記事で言及されていますが、この属性が正確に何を測定するかについての説明はどこにもありません。
このチェックのようなクエリは何を詳しく説明できますか？

@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

}

短い答え

デバイスピクセル比率は、物理ピクセルと論理ピクセルの比率です。たとえば、iPhone 4とiPhone 4Sは、物理的な線形解像度が論理的な線形解像度の2倍であるため、デバイスピクセル比2を報告します。

• 物理的な解像度：960 x 640
• 論理解像度：480 x 320

式は次のとおりです。

どこ：

ある物理的な線形解像度は

そして：

論理線形解像度です

他のデバイスは、非整数を含む、さまざまなデバイスピクセル比を報告します。たとえば、Nokia Lumia 1020は1.6667を報告し、Samsumg Galaxy S4は3を報告し、Apple iPhone 6 Plusは2.46を報告します（出典：dpilove）。ただし、特定のデバイス用に設計するべきではないため、これは原則的に何も変更しません。

討論

CSSの「ピクセル」は、「画面上の1つの画像要素」として定義されるのではなく、視野角の非線形角度測定値として定義されます。これは、腕の長さで約1インチです。出典：CSS絶対長

これは、高解像度の画像リソースを準備したり、さまざまな画像をさまざまなデバイスピクセル比率で慎重に適用したりするなど、Webデザインに関して多くの意味を持ちます。ローエンドのデバイスに非常に高解像度の画像を強制的にダウンロードさせるのではなく、ローカルで縮小するだけです。また、ハイエンドのデバイスがぼやけたユーザーエクスペリエンスのために低解像度の画像をアップスケールすることも望まないでしょう。

多くの異なるデバイスピクセル比に対応するためにビットマップイメージに悩まされている場合は、CSSメディアクエリを使用して、デバイスの異なるグループに異なるリソースのセットを提供する必要があります。これをのような素敵なトリックと組み合わせるbackground-size: coverか、明示的background-sizeにパーセント値に設定します。

例

#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'); }
}

このように、各デバイスタイプは正しいイメージリソースのみをロードします。pxCSS のユニットは常に論理ピクセルで動作することにも注意してください。

ベクターグラフィックスの事例

表示されるデバイスの種類が増えるにつれ、それらすべてに適切なビットマップリソースを提供するのは難しくなります。CSSでは現在、メディアクエリが唯一の方法であり、HTML5では、picture要素を使用してさまざまなメディアクエリにさまざまなソースを使用できますが、ほとんどのWeb開発者はまだしばらくの間IE11をサポートする必要があるため、サポートはまだ100％ではありません（ソース：caniuse）。

写真ではなく、アイコン、ラインアート、デザイン要素の鮮明な画像が必要な場合は、すべての解像度に合わせて美しく拡大縮小できるSVGについて考える必要があります。

デバイスのピクセル比== CSSピクセル比

Web開発の世界では、デバイスのピクセル比（CSSピクセル比とも呼ばれます）が、CSSによるデバイスの画面解像度の解釈方法を決定します。

ブラウザのCSSは、次の式によってデバイスの論理（または解釈）解像度を計算します。

例えば：

Apple iPhone 6s

• 実際の解像度：750 x 1334
• CSSピクセル比：2
• 論理解決：

Webページを表示すると、CSSはデバイスに375x667の解像度の画面があると見なし、メディアクエリは画面が375x667であるかのように応答します。ただし、物理画面には2倍の物理ピクセルがあるため、画面に表示される要素は実際の375x667画面の2倍の鮮明さになります。

その他の例：

サムスンギャラクシーS4

• 実際の解像度：1080 x 1920
• CSSピクセル比：3
• 論理解決：

iPhone 5s

• 実際の解像度：640 x 1136
• CSSピクセル比：2
• 論理解決：

デバイスのピクセル比が存在するのはなぜですか？

CSSピクセル比が作成された理由は、携帯電話の画面の解像度が高くなると、すべてのデバイスのCSSピクセル比が1のままだと、Webページが小さく表示されないためです。

典型的な全画面デスクトップモニターは、1920x1080解像度でおよそ24インチです。そのモニターが約5インチに縮小されたが、同じ解像度であったと想像してください。画面上にあるものは非常に小さいため、画面に表示することは不可能です。しかし、メーカーは現在1920x1080の解像度の電話スクリーンを一貫してリリースしています。

したがって、デバイスのピクセル比は電話メーカーが発明したものであり、画面上の要素を小さくしすぎて表示したり読み取ったりせずに、電話画面の解像度、鮮明さ、品質を向上させることができます。

これは、現在のデバイスのピクセル密度も通知するツールです。

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

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

-moz-device-pixel-ratio
CSSピクセルあたりのデバイスピクセル数を指定します。

これはほとんど自明です。この数は、1つの「仮想」ピクセル（CSSで設定されたサイズ）を表示するために使用される「実際の」ピクセル（画面の物理的なピクセル）の比率を表します。

Boris Smusの記事「可変ピクセル密度の高DPI画像」では、デバイスピクセル比の定義がより正確になっています。CSSピクセルあたりのデバイスピクセル数は、概算ではありませんが、すべてではありません。

でデバイスが使用するDPRを取得できることに注意してくださいwindow.devicePixelRatio。