Created
November 28, 2012 15:16
-
-
Save madrobby/4161897 to your computer and use it in GitHub Desktop.
Retina screen media query
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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! */ | |
| } |
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! */
}
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
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
@sergiolopes Good question. Because of all the variations, I usually recommend to just serve the big image to everything, but some browsers (older IE mostly) don't support
background-size. I'd use high-res images for the 1.33 ratio as well, and I'll see to test this in adapt the query (I do have a Nexus 7 lying around somewhere).