What Is Device Pixel Ratio? – Definition and How It Works
Learn what device pixel ratio means, how CSS pixels differ from device pixels, and why it matters for screenshots and coordinates.
Device pixel ratio is the number of device pixels used to render one CSS pixel. It exists because high-density screens pack more physical pixels into the same area, and layout must stay a consistent physical size.
1. Two Kinds of Pixel
- CSS pixel — the unit layout is expressed in. A 200-pixel-wide element is 200 CSS pixels.
- Device pixel — a physical pixel on the screen.
On a ratio of 1 they coincide. On a ratio of 2, each CSS pixel is drawn with a 2×2 block of device pixels, so text and images are sharper at the same physical size.
2. Why It Matters in Automation
| Consequence | Detail |
|---|---|
| Screenshot dimensions | A 1280-wide viewport at ratio 2 yields a 2560-wide image |
| Coordinate mismatch | Image coordinates are not CSS coordinates |
| File size | Higher ratios produce much larger images |
| Rendering differences | Some visual details differ between ratios |
The second is the one that breaks things: a coordinate read from a screenshot and used as a click position is wrong by the ratio factor.
3. Setting It Explicitly
context = browser.new_context(
viewport={"width": 1366, "height": 900},
device_scale_factor=1,
)
Setting it to 1 keeps screenshot dimensions equal to the viewport, which removes the coordinate conversion entirely. That is the right default unless high-resolution captures are the point.
4. When a Higher Ratio Is Wanted
Visual comparison, design review, and optical character recognition all benefit from more detail. In those cases set the ratio deliberately and record it with the output, since an image without its ratio cannot be interpreted reliably.
5. Avoid Coordinate-Based Interaction
The durable answer to ratio problems is not to compute coordinates at all. Addressing elements by reference — from the accessibility tree or a selector — sidesteps the whole class of error, and also survives scrolling and reflow.
Coordinate clicking should be reserved for content that genuinely exposes nothing to address.
6. Remote Browsers Add a Complication
With a remote browser the window is created by the provider, so a requested viewport or ratio may not be honoured. Screenshot dimensions and DOM measurements can then reference different frames.
Verify what was actually applied rather than assuming, and prefer element references over coordinates in that environment particularly.
7. Recording It With Data
Where visual output is stored — screenshots for evidence, images for comparison — record the viewport and the ratio alongside it. Two captures at different ratios are not comparable, and nothing in the image says which it was.
8. Summary
Device pixel ratio is how many device pixels render one CSS pixel, so a viewport width and a screenshot width differ by that factor on high-density displays.
Set it explicitly, default to 1 unless detail is needed, prefer element references over coordinates, verify what a remote browser actually applied, and record the ratio with any stored image.