What is devicePixelRatio — screen DPR
What is devicePixelRatio (DPR): physical pixels vs CSS pixels on Retina and HiDPI screens.
devicePixelRatio (DPR) is the ratio of physical display pixels to the CSS pixels used by layout. On high-density screens (Retina, 4K) DPR is 2 or 3: one CSS pixel is covered by several physical ones.
DPR directly affects the sharpness of images, canvas, and fonts. A 100 CSS-pixel image on Retina needs a 200–300 px source, otherwise it looks blurry. Developers account for this when rendering graphics and picking assets.
The ToolsHelper screen check shows DPR, CSS dimensions, and physical pixels. This helps explain why images or canvas look different across devices.
Device pixel ratio is the number of physical pixels per CSS pixel. A ratio of 2 means a 100 CSS-pixel box is about 200 device pixels wide. A screenshot of that box is larger than the CSS width. It is not the same as the monitor’s ppi, which needs the physical size in inches. This page defines the ratio. The screen tool reads the value your browser reports.
FAQ
Is it resolution?
Related, but it is a density multiplier, not width×height.
Why does DPR affect sharpness?
At DPR 2 one CSS pixel is drawn with four physical ones, so a twice-as-large source is needed.