Display Pixels Ratio sering juga disebut CSS Pixels Ratio, adalah perbandingan antara logikal pixels dengan hardware pixels.
Viewport tidak menggunakan hardware pixels , tetapi logikal pixels yaitu DIP (Device Independent Pixels).
Contoh, iPhone 5s, resolusi hardware 640 x 1136 pixels dengan DPR 2, maka resolusi yang akan digunakan pada viewport adalah 320 x 568 pixels ( 640/2 dan 1136/2).
Kenapa harus ada DPR? DPR dibuat karena resolusi layar ponsel kian hari makin tinggi, jika DPR dianggap 1, maka webpage akan dirender terlalu kecil untuk dilihat.
Desktop monitor 24″ umumnya memiliki resolusi 1920 x 1080. Bayangkan monitor tersebut dikecilkan menjadi 5″, tentu sulit untuk melihat konten webpage, karena akan kecil sekali. Dan faktanya, sekarang ponsel memiliki resolusi 1920 x 1080.
Oleh karena itu, para pembuat ponsel membuat DPR, agar mereka tetap bisa meningkatkan kualitas resolusi display tanpa menyebabkan konten yang ditampilkan menjadi terlalu kecil untuk dilihat atau dibaca.