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 recent­ly about high-res­o­lu­tion web­sites, espe­cial­ly since the release of the reti­na-dis­play for iPad and Mac­book Pro. To make style rules for high-res sites you’ll need to use media queries, but that’s cur­rent­ly in a bit of dis­ar­ray with quite dif­fer­ent imple­men­ta­tions across browsers (what’s new, right?).

The media queries test for the res­o­lu­tion of your device, using the device pix­el ratio (DPR) as an argu­ment. If you don’t know what that is, I rec­om­mend you read PPK’s arti­cle on devicePixelRatio first. You can use the devicePixelRatio prop­er­ty to find out the DPR of your cur­rent device; unfor­tu­nate­ly it’s not sup­port­ed in Fire­fox for some rea­son, but it’s in all oth­er major browsers:

console.log(window.devicePixelRatio);

Once you have your DPR (I’m going to use 1.5 as an arbi­trary num­ber through­out this arti­cle) you can start using it in your media query log­ic. Here’s where the fun starts.

Chrome and Safari, both desk­top and mobile, sup­port the non-stan­dard -webkit-device-pixel-ratio media fea­ture (along with the max- and min- pre­fix­es). The val­ue for this is the dec­i­mal giv­en as the DPR, for example:

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

Opera sup­ports the non-stan­dard -o-device-pixel-ratio, plus max- and min-, but requires the val­ue to be in the form of a fraction:

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

Opera also sup­ports, along with Fire­fox and IE10, the resolution fea­ture, which is in the Media Queries spec, (plus max- and min-) using dpi. 96dpi is equiv­a­lent to a DPR of 1, so mul­ti­ply the DPR by 96 to get the value:

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

From Fire­fox 16 you’ll be able to use the new dppx unit. This is equiv­a­lent to the DPR, and has the advan­tage of being intend­ed for on-screen use, where dpi is a gen­er­al unit:

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

All of this being the case, the min­i­mum num­ber of media fea­tures you need to test for device res­o­lu­tion across the major browsers is two:

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

But it might be bet­ter to use four to make sure all pos­si­bil­i­ties 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 fea­ture has been around for a long time and is fair­ly com­mon and wide­spread, but resolution has the advan­tages of being a) more con­cise and b) more flex­i­ble (allow­ing more than only pix­el units to be used). The ide­al long-term solu­tion is that WebKit browsers imple­ment resolution, and all browsers add the dppx unit.

I wrote a Fid­dle to do a quick & dirty test for sup­port of known query fea­tures (feel free to edit and improve it):

Fid­dle: quick & dirty Media Fea­ture detection

Unfor­tu­nate­ly, Opera does­n’t yet sup­port the matchMedia() method yet (it’s imple­ment­ed 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 arti­cle How to unpre­fix ‑webkit-device-pix­el-ratio from the CSS Work­ing Group blog.

Update: Sup­port for the res­o­lu­tion type land­ed in WebKit on 23rd Octo­ber 2012.

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

  1. great write up — the only thing about res­o­lu­tion is in order to have crisp images the files need to be larg­er. Which is ok if your on a desk­top but what about mobile? 

    in any case great article : )

  2. Thanks Mustafa. Yes, there are a lot of con­sid­er­a­tions when mak­ing high-res images, but I think that’s been cov­ered quite well by oth­er peo­ple. My arti­cle is real­ly a tech­ni­cal note rather than a com­plete guide.

  3. […] Using Media Queries to Test Device Res­o­lu­tion (Bro­ken Links) […]

  4. […] Using Media Queries to Test Device Res­o­lu­tion — There’s been much talk recent­ly about high-res­o­lu­tion web­sites, espe­cial­ly since the release of the reti­na-dis­play for iPad and Mac­book Pro. The media queries test for the res­o­lu­tion of your device, using the device pix­el ratio (DPR) as an argument. […]

  5. I have set up a page that will show you the val­ues of the media fea­tures of your brows­er / device:

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

    Hope this helps. There is also a page with the most com­mon mobile devices val­ues. It clear­ly shows that the res­o­lu­tion fea­ture, while bet­ter, is just sup­port­ed by Fire­fox today. So it is for all intents and pur­pos­es useless.

  6. If you want it for WebKit, here is a patch imple­ment­ing it, though wait­ing 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 writ­ten about this top­ic before, though I still see a lot devel­op­ers using ver­bose media […]

  8. […] The col­or-mode media fea­ture is now avail­able, but sad­ly the res­o­lu­tion fea­ture isn’t, mean­ing you must con­tin­ue to use the non-stan­dard –webkit-device-pix­el-ratio. […]

  9. I have a ques­tion. If we are going to start using high res­o­lu­tion graph­ics on web­sites, what’s to keep peo­ple from steal­ing those images and using them to print t‑shirts, fly­ers and all kinds of oth­er things? No one pays atten­tion to copy­rights on the internet.
    How can we pro­tect against this?

  10. Thats a real­ly good point Tim. I guess water­mark­ing images may not always be acceptable.

  11. […] is some­thing web devel­op­er and author Peter Gasston wrote about for Bro­ken Links a year ago. Speak­ing to .net today, he thought that the intro­duc­tion of the res­o­lu­tion media query […]

  12. i have to set the fan­cy­box pop­up its work on mozil­la 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-pix­el-ratio: 3/2)*/
    plz help me out

  13. […] The res­o­lu­tion Media Query allows you to tai­lor your CSS to spe­cif­ic pix­el densities. […]