Device Resolution

2013 CC-BY Ryan Van Etten

here to learn how to enable JavaScript

Resolution confused me until I investigated the units behind it.

Takeaways

2 unit sets exist and differ at a fixed scale: device units and CSS units.
Resolution is calculated as the number of dots that can fit along a particular CSS length.
Unit conversion: $1 in = 2.54 cm = 96 px = 72 pt$
CSS has relative and absolute lengths. In normal zoom: $1 em = 16 px$
dppx is equivalent to device-pixel-ratio.
devicePixelRatio definition differs by platform.
Media queries can target min-resolution. Use with care for speed.

Units: resolution

Unit	Definition	Measures
dot	device pixel	length
px	CSS pixel	length
cm	CSS centimeter	length
in	CSS inch	length
dppx	$dots / px$	resolution
dpcm	$dots / cm$	resolution
dpi	$dots / in$	resolution

Outputs from res

Method	Output (current device)	Unit
`res.dppx()`	?	dppx
`res.dpi()`	?	dpi
`res.dpcm()`	?	dpcm

Relevant JavaScript natives

Input	Output (current device)	Notes
`window.devicePixelRatio`	?	draft, quirks
`window.matchMedia`	?	standard
`window.msMatchMedia`	?	IE10 PP3
`window.screen.deviceXDPI`	?	IE, zoom-relative
`window.screen.deviceYDPI`	?	IE, zoom-relative
`window.screen.logicalXDPI`	?	IE
`window.screen.logicalYDPI`	?	IE
`window.screen.systemXDPI`	?	IE
`window.screen.systemYDPI`	?	IE

`devicePixelRatio`

window.devicePixelRatio is equivalent to dppx
window.devicePixelRatio changes with zoom on desktops yet remains static on mobile devices. device-pixel-ratio media queries also differ as so. This difference defies reason and needs further investigation or explanation.

Relevant JavaScript modules