Device pixel ratio: why your 4K phone reports 390 pixels
Physical pixels, CSS pixels, and the 2×/3× multiplier between them — the concept that explains most "why is my image blurry" mysteries.
5 min read · Reviewed July 2026
Your phone's box says 1179 × 2556 pixels. Your browser says the screen is 393 wide. Neither is lying — they're counting different pixels, and the multiplier between them is the device pixel ratio (DPR).
When phone displays got so dense that text drawn 1:1 became microscopic, platforms introduced a scaling layer: CSS pixels. A CSS pixel is a layout unit sized for comfortable viewing (roughly 1/96 of an inch at arm's length); the DPR says how many physical pixels render each one. At DPR 3, one CSS pixel is a 3×3 block of real pixels — text stays a readable size but gets drawn razor-sharp.
Why designers and developers must care
Images are where DPR bites. A photo placed at 300 CSS pixels wide on a DPR-3 phone is actually painted across 900 physical pixels — so if the file is only 300 pixels wide, the browser stretches it and it looks soft. That's the entire mystery of 'why do my images look blurry on phones.' The fix is responsive images: provide 2× and 3× versions (srcset) and let the browser pick.
Icons dodge the problem entirely when they're SVG — vectors rasterize crisply at any ratio, which is why the modern web went vector for interface graphics. If you're still shipping PNG icons, DPR is the argument for switching.
Check your own
The tool above shows your DPR and does the multiplication — CSS resolution times ratio equals the physical panel. Desktop monitors are typically 1× or 2× (or 1.25×/1.5× on Windows scaling); phones run 2× to 4×. Once you see the two numbers side by side, the whole system stops being mysterious.