Display Geometry: CSS Pixels, Physical Resolution & Device Pixel Ratio (DPR)

Designing responsive web applications requires understanding the distinction between physical hardware pixels and logical CSS pixels.

The Retina Revolution & Device Pixel Ratio (DPR)

On high-DPI displays (Apple Retina, 4K monitors), a single logical CSS pixel corresponds to multiple physical display pixels: $$\text{Physical Resolution} = \text{CSS Viewport} \times \text{DPR}$$ A device with a 390x844 viewport and DPR of 3.0 actually renders on a 1170x2532 physical pixel matrix.