What DPR means
Device pixel ratio is the relationship between CSS pixels and physical display pixels. A DPR of 2 means one CSS pixel can be represented by roughly two physical pixels in each direction, which is common on many high-DPI screens.
Why DPR matters for images
Images that look sharp at DPR 1 can appear soft on high-DPI displays if only one low-resolution asset is served. Responsive images, srcset, and 2x or 3x image assets help browsers choose sharper files when needed.
Why fractional DPR values happen
Values such as 1.25 or 1.5 are common on desktop systems with display scaling or browser zoom. JavaScript cannot always separate browser zoom from OS scaling, so the result should be treated as the effective browser/device scaling context.
How to use DPR in QA
Include DPR when reporting screenshots, blurry icons, canvas rendering issues, or layout differences across devices. It helps explain why a high-resolution display can still have a smaller CSS viewport width.
DPR examples
DPR values are browser-reported scaling context. Treat them together with viewport width instead of using them alone.
DPR 1
One CSS pixel maps closely to one physical pixel.
DPR 2
High-DPI screens may need 2x images for sharp assets.
DPR 1.25 / 1.5
Often appears with OS display scaling or browser zoom.