Web guide
How to check device pixel ratio
Device pixel ratio, or DPR, describes the relationship between CSS pixels and device pixels. It can change with display scaling, browser zoom, and the screen currently holding the window.
Check device pixel ratioCheck DPR in a few steps
- Open the Device Pixel Ratio Checker in the browser you want to measure.
- Read the current
devicePixelRatiovalue. - Move the window to another display or change page zoom if you want to compare environments.
- Select Refresh measurements when needed.
- Pause live updates before copying a stable snapshot.
What the number means
device pixels per axis = CSS pixels × DPR
At DPR 2, a length of 100 CSS pixels nominally spans 200 device pixels along each axis. The corresponding 100 by 100 CSS-pixel area can cover 200 by 200 device pixels, or four times as many device pixels in total.
| DPR | 100 CSS px nominally spans | What to remember |
|---|---|---|
| 1 | 100 device px | One-to-one nominal mapping |
| 1.25 | 125 device px | Fractional ratios are normal |
| 2 | 200 device px | Often needs denser raster assets |
Why device pixel ratio changes
- Operating-system scaling: display scaling can increase the ratio used by the browser.
- Browser page zoom: changing page zoom may change
devicePixelRatio. - Multiple displays: moving a window between screens can produce a different value.
- Pinch zoom: this usually changes visual viewport scale rather than DPR.
Take the measurement in the exact browser, zoom level, and display configuration you are testing.
What DPR does not tell you
Device pixel ratio is not the screen's physical dots per inch, diagonal size, or guaranteed native panel resolution. It is a browser value used in the CSS rendering environment. It also does not mean every CSS edge aligns perfectly with physical pixel boundaries, especially when the ratio is fractional.
How developers use DPR
DPR helps when selecting responsive raster images, sizing a canvas backing store, and diagnosing why a screenshot or bitmap looks soft. Layout should still use CSS pixels. Avoid multiplying normal CSS dimensions by DPR just to make interfaces larger.