= Device pixel ratio
{title2=$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:
$$
r=\frac{\ell_{\mathrm{CSS}}}{\ell_{\mathrm{device}}}.
$$
The numerator and denominator are physical <lengths>, so the ratio is dimensionless.<CSSOM View Module by World Wide Web Consortium>[Window.devicePixelRatio attribute, determine-the-device-pixel-ratio algorithm, steps 1–4]{ref}
At $r=2$, a $300\times150$ <CSS pixel> region corresponds to $600\times300$ 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.<CSSOM View Module by World Wide Web Consortium>[§2.2, Zooming, distinction between page zoom and visual-viewport scale; devicePixelRatio algorithm]{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.
Back to article page
