What Is My Device Pixel Ratio
Your device pixel ratio
—
Zoom in or out (Ctrl/Cmd +/−) to watch the ratio change. All values are read locally.
How to use
- Open the page — your device pixel ratio appears large at the top.
- Use Ctrl/Cmd + or − to zoom and watch DPR change on some systems.
- Click Copy to save the DPR value for CSS or image export settings.
FAQ
What is my device pixel ratio?
Device pixel ratio (DPR) is window.devicePixelRatio — how many physical screen pixels map to one CSS pixel. A DPR of 2 means one CSS pixel is drawn with 2×2 physical pixels (typical Retina/HiDPI).
What is a normal device pixel ratio?
1 is standard desktop density. 2 is common on Retina Macs and many phones. 3 appears on some flagship phones. Fractional values (for example 1.25) often come from OS display scaling or browser zoom.
Why does DPR change when I zoom?
Browser zoom can affect reported DPR on some platforms because the relationship between CSS pixels and device pixels shifts. Refresh after resetting zoom to 100% for a baseline reading.
How do I calculate physical resolution?
Multiply CSS screen width and height by DPR. This page shows both CSS resolution and physical resolution in the details panel automatically.
What is the difference between DPR and screen resolution?
Screen resolution is width × height in CSS pixels. DPR is the multiplier to physical pixels. You need both to choose correct image asset sizes (@2x, @3x).
Is any data sent to a server?
No. DPR and screen values are read locally from window APIs. Nothing is uploaded.
Introduction
What Is My Device Pixel Ratio shows your current devicePixelRatio front and center — the number that tells you whether you are on standard (1×), Retina (2×), or higher-density (3×) rendering, with CSS and physical resolution spelled out below.
DPR explains why a "1920×1080" screen looks sharp or soft, why @2x images matter, and why canvas and WebGL buffers need different sizes than CSS pixels. This page reads the live value from your browser with no install.
Understanding device pixel ratio
Device pixel ratio (DPR) = physical pixels per CSS pixel.
| DPR | Label | Typical devices |
|---|---|---|
| 1 | Standard | Many external monitors, older laptops |
| 2 | Retina / HiDPI | MacBook Retina, many phones |
| 3 | High-density | Some flagship phones |
| 1.25–1.5 | OS scaling | Windows display scale, fractional zoom |
Physical width ≈ screen.width × DPR (shown in the details panel).
Common use cases
- Choosing image assets — export @2x/@3x icons when DPR is 2 or 3.
- Canvas and WebGL — set backing store dimensions using DPR for sharp rendering.
- CSS
image-set()andresolution— verify which density rules apply. - QA across machines — document DPR when a layout looks different on Retina vs non-Retina.
Best practices
- Reset browser zoom to 100% before recording a baseline DPR for documentation.
- Pair DPR with what is my screen resolution for full display metrics.
- Use what is my viewport size for layout width — DPR does not replace viewport for breakpoints.
- For the all-in-one snapshot, open device info.