html - Retina - デバイスのピクセル比と画像のサイズの相関関係?

Question

window.devicePixelRatio値が何であるか、およびそのデバイスに必要な画像のサイズ (2x、3x など) をどのように決定するかがよくわかりません。

たとえば、iMac 5K Retina (Late 2015) では、ピクセル比は少なくとも 3 程度であると予想されますが、実際には iPad Air や iPhone 6s と同じ 2 です。それは 2x ビットマップを好むということですか? 3倍？

Answer 1

devicePixelRatio特定のデバイス上の物理ピクセルとデバイスに依存しないピクセル (ディップ)の比率です。ディップは、ディスプレイの「動作」と考えることができます。

devicePixelRatio例: 非 Retina 27 インチ iMac の幅は 2560 物理ピクセルです。すべてが 1:1 で表示されるため、幅も2560 ディップなので、1.

Retina 27 インチ iMac では、幅は 5120 物理ピクセルです。しかし、ディスプレイは 2560 ピクセル幅しかないように「動作」するため、すべてが非 Retina iMac と同じ物理サイズで表示されます。したがって、それでも 2560 ディップです。幅devicePixelRatioが広いので2(5120 / 2560)、2 倍の画像を提供します。

(Retina ディスプレイを使用している場合は、システムのディップ値を調べることができます。[システム環境設定] > [ディスプレイ] > [ディスプレイ] に移動し、[解像度] トグルを [スケーリング] に切り替えてから、さまざまなオプションにカーソルを合わせます。デフォルトの場合は、 5K iMac の場合、「2560 x 1440 のように見えます」と表示されます)。

Answer 2

今日まで、Retina ディスプレイ向けのグラフィックスの標準的な方法は、通常の非 Retina サイズの 2 倍の画像を提供することです。

注意: 現在のユーザーのデバイス サイズと解像度に必要な大きさの画像のみを提供することは、"帯域幅の衛生" に適しています。その解決策は、この質問の範囲外です。