windowdevicePixelRatio

window.devicePixelRatio is a read-only property of the Window interface that returns the ratio of physical device pixels to CSS pixels for the current display or viewport. In practice, it indicates how many hardware pixels correspond to a single CSS pixel and is used to control rendering quality on high-density screens. A value of 1 means a 1:1 mapping; values greater than 1 indicate higher pixel density, such as on Retina or other HiDPI displays. The value can change when the user zooms the page or when the window is moved to a monitor with a different pixel density.

In typical usage, window.devicePixelRatio helps steer rendering decisions, such as canvas drawing and image assets. A common pattern for canvases is to set the canvas width and height to the CSS size multiplied by devicePixelRatio, then scale the drawing context by devicePixelRatio to keep visuals crisp. It also informs responsive image strategies and CSS media queries that target higher resolutions (for example, using resolution in dppx or dpi).

Important nuance: there is no global variable named windowdevicePixelRatio. The correct property name is window.devicePixelRatio. While widely supported in modern browsers, environments without this property should assume a fallback value of 1.

See also: devicePixelRatio, screen, canvas, HiDPI.