Device pixel ratio ($r={\ell }_{\mathrm{CSS}}/{\ell }_{\mathrm{device}}$)

The device pixel ratio expresses the size of one CSS pixel relative to one physical device pixel. The CSSOM View Module by World Wide Web Consortium defines window.devicePixelRatio as the current CSS pixel size divided by the output device's vertical pixel size, with page zoom included in the former:The numerator and denominator are physical lengths, so the ratio is dimensionless.^[ref]

At $r=2$, a $300\times 150$ CSS pixel region corresponds to $600\times 300$ device pixels in a uniform mapping. The linear counts double, while the pixel count scales by $r^2=4$. A raster drawing surface can therefore need four times as many stored pixels to supply one sample per device pixel while retaining the same layout size. An existing low-resolution image does not gain missing detail merely because the display has a larger ratio.

The ratio need not be an integer. A ratio such as $1.25$ means that a one-CSS pixel boundary need not align with the physical grid, so rasterization has to distribute coverage. Increasing page zoom changes the size of a CSS pixel and can change the reported ratio. Pinch zoom scales the visual view without redefining the layout pixel in the same way; it is a separate scale.^[ref]

Pixel density in pixels per physical inch and device pixel ratio consequently answer different questions: the former describes a physical grid, while the latter describes its mapping from the browser's layout scale.