Skip to content

Instantly share code, notes, and snippets.

@madrobby
Created November 28, 2012 15:16
Show Gist options
  • Save madrobby/4161897 to your computer and use it in GitHub Desktop.
Save madrobby/4161897 to your computer and use it in GitHub Desktop.
Retina screen media query
@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! */
}
@curtisj44
Copy link

What do you think of the simplified version found here: http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/?

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
    /* Retina rules! */
}

@Maddy1984
Copy link

Hi,

Your query doesn't work for Chrome on my Macbook Pro Retina 13.3".

 Chrome version: 36.0.1985.125
 Resolution: 204dpi

It works fine for Firefox and Safari. Thanks very much in advance!
Maddy

@Maddy1984
Copy link

Sorry, scrap that. It does work.

For some reason, however, 3/2 is giving me an error. It's fine when I replace it with 1.5. It might have to do with the fact I'm using gss.

Thanks,
Maddy

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