Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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! */
}
@madrobby

This comment has been minimized.

Show comment Hide comment
@madrobby

madrobby Nov 28, 2012

Don't be shy—comments are very welcome, especially if you found a device or browser that's quirky and needs extra help!

Owner

madrobby commented Nov 28, 2012

Don't be shy—comments are very welcome, especially if you found a device or browser that's quirky and needs extra help!

@sergiolopes

This comment has been minimized.

Show comment Hide comment
@sergiolopes

sergiolopes Nov 28, 2012

What about tvdpi Android devices like Nexus 7? They have a pixel ratio ~1.33. Do you think we need to address them specifically? Or the normal @1x file would be fine for them? And then we should use @2x only to pixel ratio >= 1.5? (Nice work and great book btw)

What about tvdpi Android devices like Nexus 7? They have a pixel ratio ~1.33. Do you think we need to address them specifically? Or the normal @1x file would be fine for them? And then we should use @2x only to pixel ratio >= 1.5? (Nice work and great book btw)

@krisbulman

This comment has been minimized.

Show comment Hide comment
@krisbulman

krisbulman Nov 28, 2012

I tested the following slim one on every device on browserstack with 2x images and had good results.. (including opera). How does this one differ.. more future proof?

http://core.trac.wordpress.org/changeset/22629

I tested the following slim one on every device on browserstack with 2x images and had good results.. (including opera). How does this one differ.. more future proof?

http://core.trac.wordpress.org/changeset/22629

@madrobby

This comment has been minimized.

Show comment Hide comment
@madrobby

madrobby Nov 28, 2012

@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).

Owner

madrobby commented Nov 28, 2012

@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).

@curtisj44

This comment has been minimized.

Show comment Hide comment
@curtisj44

curtisj44 Nov 30, 2012

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! */
}

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

This comment has been minimized.

Show comment Hide comment
@Maddy1984

Maddy1984 Jul 28, 2014

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

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

This comment has been minimized.

Show comment Hide comment
@Maddy1984

Maddy1984 Jul 28, 2014

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

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