Using Media Queries to test device resolution

Warning This article was written over six months ago, and may contain outdated information.

There’s been much talk recently about high-resolution websites, especially since the release of the retina-display for iPad and Macbook Pro. To make style rules for high-res sites you’ll need to use media queries, but that’s currently in a bit of disarray with quite different implementations across browsers (what’s new, right?).

The media queries test for the resolution of your device, using the device pixel ratio (DPR) as an argument. If you don’t know what that is, I recommend you read PPK’s article on devicePixelRatio first. You can use the devicePixelRatio property to find out the DPR of your current device; unfortunately it’s not supported in Firefox for some reason, but it’s in all other major browsers:

console.log(window.devicePixelRatio);

Once you have your DPR (I’m going to use 1.5 as an arbitrary number throughout this article) you can start using it in your media query logic. Here’s where the fun starts.

Chrome and Safari, both desktop and mobile, support the non-standard -webkit-device-pixel-ratio media feature (along with the max- and min- prefixes). The value for this is the decimal given as the DPR, for example:

@media (-webkit-min-device-pixel-ratio: 1.5) {}

Opera supports the non-standard -o-device-pixel-ratio, plus max- and min-, but requires the value to be in the form of a fraction:

@media (-o-min-device-pixel-ratio: 3/2) {}

Opera also supports, along with Firefox and IE10, the resolution feature, which is in the Media Queries spec, (plus max- and min-) using dpi. 96dpi is equivalent to a DPR of 1, so multiply the DPR by 96 to get the value:

@media (min-resolution: 144dpi) {}

From Firefox 16 you’ll be able to use the new dppx unit. This is equivalent to the DPR, and has the advantage of being intended for on-screen use, where dpi is a general unit:

@media (min-resolution: 1.5dppx) {}

All of this being the case, the minimum number of media features you need to test for device resolution across the major browsers is two:

@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}

But it might be better to use four to make sure all possibilities are covered:

@media (min-resolution: 1.5dppx), (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2) {}

The device-pixel-ratio feature has been around for a long time and is fairly common and widespread, but resolution has the advantages of being a) more concise and b) more flexible (allowing more than only pixel units to be used). The ideal long-term solution is that WebKit browsers implement resolution, and all browsers add the dppx unit.

I wrote a Fiddle to do a quick & dirty test for support of known query features (feel free to edit and improve it):

Fiddle: quick & dirty Media Feature detection

Unfortunately, Opera doesn’t yet support the matchMedia() method yet (it’s implemented in Presto 2.11 but not yet made its way into a release) so this won’t work in Opera right now.

NB: This post expands on the article How to unprefix -webkit-device-pixel-ratio from the CSS Working Group blog.

Update: Support for the resolution type landed in WebKit on 23rd October 2012.

13 comments on
“Using Media Queries to test device resolution”

  1. great write up – the only thing about resolution is in order to have crisp images the files need to be larger. Which is ok if your on a desktop but what about mobile?

    in any case great article : )

  2. Thanks Mustafa. Yes, there are a lot of considerations when making high-res images, but I think that’s been covered quite well by other people. My article is really a technical note rather than a complete guide.

  3. […] Using Media Queries to Test Device Resolution (Broken Links) […]

  4. […] Using Media Queries to Test Device Resolution – There’s been much talk recently about high-resolution websites, especially since the release of the retina-display for iPad and Macbook Pro. The media queries test for the resolution of your device, using the device pixel ratio (DPR) as an argument. […]

  5. I have set up a page that will show you the values of the media features of your browser / device:

    http://pieroxy.net/blog/pages/css-media-queries/test-features.html

    Hope this helps. There is also a page with the most common mobile devices values. It clearly shows that the resolution feature, while better, is just supported by Firefox today. So it is for all intents and purposes useless.

  6. If you want it for WebKit, here is a patch implementing it, though waiting for review https://bugs.webkit.org/show_bug.cgi?id=99077

    Kenneth Christiansen [October 23rd, 2012, 09:52]

  7. […] Ben Frain, and Peter Gasston have all written about this topic before, though I still see a lot developers using verbose media […]

  8. […] The color-mode media feature is now available, but sadly the resolution feature isn’t, meaning you must continue to use the non-standard –webkit-device-pixel-ratio. […]

  9. I have a question. If we are going to start using high resolution graphics on websites, what’s to keep people from stealing those images and using them to print t-shirts, flyers and all kinds of other things? No one pays attention to copyrights on the internet.
    How can we protect against this?

  10. Thats a really good point Tim. I guess watermarking images may not always be acceptable.

  11. […] is something web developer and author Peter Gasston wrote about for Broken Links a year ago. Speaking to .net today, he thought that the introduction of the resolution media query […]

  12. i have to set the fancybox popup its work on mozilla but not work in chorme
    these are the media query which i used
    *@media only screen and (-webkit-min-device-pixel-ratio:0),
    only screen and (min–moz-device-pixel-ratio:0),
    only screen and (min-device-pixel-ratio:0),
    only screen and (-o-min-device-pixel-ratio: 3/2)*/
    plz help me out

  13. […] The resolution Media Query allows you to tailor your CSS to specific pixel densities. […]