Media query tests - resolution and matchMedia

Back to index.

CSS 3 spec | CSS4 spec

It turns out that window.matchMedia doesn’t actually match the resolution media query in Chrome — and maybe in other browsers, too. Also, it frequently does not match window.devicePixelRatio.

Basic

Equality

Here window.devicePixelRatio is read out on page load, and not when you resize the page. So the equality of media query and JavaScript property should be lost as soon as you zoom — but isn’t.

Units

Values

The test

Above you see part of my regular media query test suite. Keep an eye on the last value, that shows which media query is actually enabled right now.

When you zoom or resize the page you see the result of window.matchMedia("screen and (resolution: DPRdppx )").matches, where DPR is the current value of window.devicePixelRatio.

The value should always match the media query, but doesn’t.