Media query tests - resolution

Back to index.

CSS 3 spec | CSS4 spec

The resolution media query tells you something about the screen resolution, but not quite what you expect.

Although it uses dpi, dpcm, and dppx as units, the inches and centimeters involved aren’t actual inches and centimeters, and the media queries thus say nothing about the physical size of the device. Instead, 1 inch is defined as 96 pixels, and centimeters are derived from that.

The dppx value should be equal to window.devicePixelRatio, since they give the same information: the number of physical pixels per screen pixel. (On retina screens this is 2; on normal screens 1.)

window.devicePixelRatio is read out only on page load. If you want to compare the media query with the JavaScript property on another zoom level, reload the page.