The ultimate “target retina screens” media query

There now is an abundance of devices with some sort of high-density display, from MacBook Pros to iPads, from Windows Surface tablets to all kinds of mobile phones.

All of these devices have one thing in common: In web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel.

In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”. Instead you have to fight through a whole forest of media query rules.

Here’s the set that I use on my sites:

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

/* Retina rules! */

}

This is tested on all browsers I could get ahold of, on real Retina and non-retina displays, and should be future-proof as well. We use this specific query in production on Freckle Time Tracking (Sorry, marketing site is not retinafied yet!)—and it works well!

Specifically, it supports Safari, Chrome, Firefox (Note: Firefox doesn’t really support Retina screens at all yet) and Internet Explorer 9 and 10 (IE has great Retina support, actually!).*

I’d love to hear corrections and suggestions about this, please use the gist.

*Before you ask, I suppose it supports Opera as well, but I don’t test on Opera. It’s a long story.