Device Pixel Ratio Checker
Your device pixel ratio
—
Zoom in or out (Ctrl/Cmd +/−) to watch the ratio change. All values are read locally in your browser.
How to use
- Open the page — your device pixel ratio appears as a large number at the top.
- Read the resolution detail card to compare CSS pixels with physical pixels and see your color depth.
- Zoom in or out with Ctrl/Cmd and +/− to watch the DPR change in real time.
FAQ
What is my device pixel ratio?
The big number at the top is your device pixel ratio (DPR) — the value of window.devicePixelRatio. A DPR of 1 means one physical pixel per CSS pixel; a DPR of 2 (Retina) means four physical pixels per CSS pixel.
What is a good device pixel ratio?
There is no single best value — it depends on the hardware. Standard monitors are usually 1, Retina laptops and most phones are 2 or 3. Higher DPR means sharper text and images but larger asset sizes.
Why does my DPR change when I zoom?
Browser zoom multiplies the device pixel ratio, so zooming to 150% on a 1x display reports a DPR of 1.5. That is why DPR is read live here and updates as you zoom or move the window between monitors.
How does DPR affect images?
On a 2x screen, a 100×100 CSS-pixel image needs a 200×200 source to look crisp. Use DPR with srcset and the x descriptor (1x, 2x, 3x) so high-density screens get sharp assets without forcing low-density screens to download them.
What is the difference between CSS and physical resolution?
CSS resolution is the logical size used for layout (screen.width × screen.height). Physical resolution multiplies that by the DPR to give the actual pixel grid the panel renders. Both are shown in the detail card.
Is any data sent to a server?
No. The ratio and resolution are read with standard browser APIs and computed locally. Nothing is uploaded.
Introduction
Device Pixel Ratio Checker answers a question every front-end developer eventually asks: what is my DPR? It reads window.devicePixelRatio live and shows it as a single, prominent number, then breaks down how your CSS resolution maps to the physical pixels on the panel.
Device pixel ratio is the bridge between the coordinate system your CSS uses and the dense pixel grid of modern displays. Getting it right is what makes text crisp on a Retina MacBook and images sharp on a flagship phone — and getting it wrong is why assets look blurry or oversized.
What is device pixel ratio?
Device pixel ratio (DPR) is the number of physical device pixels that correspond to a single CSS pixel. It is exposed in JavaScript as window.devicePixelRatio.
| DPR | Meaning | Typical hardware |
|---|---|---|
1 |
1 physical px = 1 CSS px | Standard desktop monitors |
2 |
4 physical px per CSS px | Retina laptops, many tablets |
3 |
9 physical px per CSS px | High-end smartphones |
| Fractional | OS scaling or browser zoom | 125%/150% Windows scaling, zoom |
How DPR is calculated here
The tool reads window.devicePixelRatio for the ratio and screen.width/screen.height for the CSS resolution, then multiplies them to estimate the physical resolution. Because the value changes with zoom and when a window moves between monitors of different densities, the reading updates automatically on resize.
Common use cases
- Responsive image work — decide which
srcsetdensities (1x, 2x, 3x) you need to ship. - Canvas and WebGL — scale the drawing buffer by DPR so rendering is not blurry on HiDPI screens.
- QA and bug reports — record the DPR when a "blurry on my screen" report comes in.
- Design hand-off — confirm the target density before exporting assets.
Best practices
- Multiply canvas dimensions by DPR (and scale the context) to render crisp graphics on high-density displays.
- Provide
2xand, for phones,3ximage sources, but avoid serving them to1xscreens to save bandwidth. - Treat DPR as dynamic — never cache it once at load; re-read it on resize, as this tool does.
- For raw viewport dimensions, pair this with the viewport size checker; for a full environment snapshot, see device info.