What is device pixel ratio (DPR)?

If you’ve ever wondered why your 4K laptop tells websites it’s only 1920 pixels wide, the answer is device pixel ratio — one of the most misunderstood numbers in display technology.

Two kinds of pixel

Modern screens have two different pixel grids:

• Physical pixels — the actual dots on the panel. A “4K” laptop really does have 3840 × 2160 of them.
• CSS (logical) pixels — the coordinate system web pages and the operating system draw with.

Device pixel ratio (DPR) is simply how many physical pixels make up one CSS pixel along each axis:

physical pixels = CSS pixels × DPR

Why it exists

On a high-density panel, a button sized at “40 pixels” would be microscopic if it used physical pixels. So the system renders interfaces in larger logical pixels and packs multiple physical pixels into each one, keeping everything a comfortable size and crisp.

• A standard monitor has DPR 1 — logical and physical pixels are identical.
• “Retina” displays are usually DPR 2 — a 2560 × 1664 panel presents as 1280 × 832 CSS pixels.
• Many phones use DPR 3 or fractional values like 2.625.

Common DPR values by device

DPR isn’t a single “high-DPI = 2×” switch — it varies by manufacturer and even by model:

Device type	Typical DPR	Example
Standard desktop monitor	1	1080p monitor, 1440p monitor
“Retina” Mac laptops	2	MacBook Pro 14”
4K monitor at 150% scaling	1.5	4K monitor
Most iPhones	2–3	iPhone 15 Pro
Many Android phones	2.6–3.75	Galaxy S24 Ultra
Google Pixel phones	fractional, e.g. 2.625	Pixel 8

Fractional ratios like 2.625× look odd but are deliberate — they let a manufacturer hit a specific logical-pixel width (useful for consistent app layouts) from whatever physical pixel count the panel actually has.

How to check your own DPR

Three ways, from easiest to most technical:

1. This site — our resolution detector reads window.devicePixelRatio live and shows it alongside your logical and physical resolution.
2. Browser console — open DevTools and type window.devicePixelRatio.
3. OS display scaling — on Windows, Settings → Display → “Scale” roughly maps to DPR (100% ≈ DPR 1, 150% ≈ DPR 1.5, 200% ≈ DPR 2). On macOS, “Looks like” resolutions under Retina displays are already built around DPR 2.

DPR, browser zoom and OS scaling aren’t quite the same thing

It’s easy to conflate three different controls that all affect this number:

• OS display scaling sets the baseline DPR for everything on screen (e.g. Windows’ 150% scaling).
• Browser zoom (Ctrl/Cmd + or −) multiplies into devicePixelRatio on top of that baseline in Chromium and Firefox — zooming a DPR-1 monitor to 150% reports a DPR of 1.5, identical to what a true high-density screen would report.
• The physical panel never changes; only how many physical pixels represent one CSS pixel changes.

This is why devicePixelRatio alone can’t tell you whether someone has a sharp screen or has just zoomed in — it only tells you the current ratio, not the cause.

What developers need to know

DPR is why you ship @2x and @3x images, or use srcset: a 1× image looks soft on a 2× screen because each CSS pixel is being stretched across four physical ones.

/* Target high-density displays */
@media (min-resolution: 2dppx) {
  .logo { background-image: url("[email protected]"); }
}

In JavaScript you can read it directly:

const dpr = window.devicePixelRatio; // 1, 2, 3, 2.625…

Because DPR can change at runtime (a user zooms, or drags a window to a different monitor), production code should listen for changes rather than reading it once:

matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
  .addEventListener('change', () => {
    // re-check window.devicePixelRatio and swap assets if needed
  });

FAQ

Is a higher DPR always better? For sharpness, yes. But it means more physical pixels to render per CSS pixel, so very high DPR on a large canvas (video, games) costs more GPU power — one reason 4K monitors are often scaled to 1.5× rather than left at native density for everyday use.

Why does my screenshot look bigger or smaller than my screen? Screenshot tools sometimes capture physical pixels and sometimes logical pixels. On a DPR-2 screen, a full-screen screenshot can come out at double the dimensions you’d expect from the “resolution” shown in your display settings.

Does DPR affect PPI? They’re related but distinct — PPI is a fixed property of the physical panel, while DPR is how the OS chooses to map that panel to logical pixels. See what is PPI for how pixel density itself is calculated.

The practical takeaway

When a tool reports your resolution as “smaller” than the box claimed, it isn’t wrong — it’s reporting CSS pixels. Multiply by your DPR to get the true panel resolution. Our resolution detector shows both the logical and physical numbers side by side, along with your exact device pixel ratio.