DevicePixelRatio

devicePixelRatio is a read-only property of the window object in web browsers that reports the ratio of physical pixels to CSS pixels for the current display. In practice, it indicates how densely pixels are arranged on the screen. On standard displays, this value is 1; on high-density screens such as many laptops and smartphones, it is greater than 1 (commonly 2 or 3). The value can change when the page is zoomed.

The devicePixelRatio affects layout and rendering because CSS pixels are abstract units; the ratio helps determine how much detail is available and how content should be scaled for crispness. Web developers often use it to render sharp graphics on canvas elements and to select higher-resolution image assets.

Common usage patterns include scaling canvas drawings by the devicePixelRatio: set the canvas width and height to the CSS width and height multiplied by DPR, apply a drawing context scale of DPR, and then draw as usual. CSS tricks include using media queries such as (min-resolution: 2dppx) or (min-device-pixel-ratio: 2) to serve higher-DPR resources. Note that DPR is not a guarantee of sharpness if assets are not provided at the appropriate resolution.

Because DPR can change with user actions such as zooming, responsive scripts often listen for resize events and recalculate layout and canvas dimensions. The property is read-only and varies by device and browser; it should be treated as a hint about display density rather than a precise measure of image quality.

See also: CSS pixel, HiDPI, Retina display, canvas, media queries.