Skip to content

Instantly share code, notes, and snippets.

@madrobby

madrobby/gist:2997187

Created June 26, 2012 17:13
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save madrobby/2997187 to your computer and use it in GitHub Desktop.
Save madrobby/2997187 to your computer and use it in GitHub Desktop.
Download ZIP
The ultimate media query to rule them all ("all" being high DPI/"Retina" screens)
Raw
gistfile1.css
@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: 1.5dppx) {
/* "retina" styles */
}
@mathiasbynens
Copy link

Don’t forget about the awkwardly named (min--moz-device-pixel-ratio: 1.5) :)

@madrobby
Copy link
Author

@mathiasbynens Fixed it to use the weird Mozilla variant. Looking good?

@mathiasbynens
Copy link

Looks good! You may (or may not) want to add -moz-min-device-pixel-ratio: 1.5 back in, in case Mozilla switch to that syntax before going unprefixed.

@iDGS
Copy link

iDGS commented Sep 14, 2013

I recently came across some additional input on this topic by Brett Jankord http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/ ...and wondered what your thoughts might be?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment