Media queries for retina – the basics

[Senff]

So, strangely enough I never really had to deal with media queries for retina screens only. Had to do it and now I’m stuck at the very basics!

It turns out that a media query that includes -webkit-min-device-pixel-ratio sets the iPhone 5 breakpoint at 980 pixels.

See these examples:

http://codepen.io/senff/pen/nqcdA – the background is WHITE because the media query (max-width: 979px) style doesn’t apply. http://codepen.io/senff/pen/sJAmv – the background is RED because the media query style (max-width: 981px) does apply.

Based on that, I would conclude that the iPhone 5 screen is detected as being 980 pixels wide.

I don’t see where the 980 comes from. iPhone 5 is 320 x 576 (or 640 x 1152), there is no 980 anywhere there. Also, it doesn’t seem to matter whether the phone is landscape or portrait – it’s detected as 980 regardless.

So what am I missing? I’m using this type of media query:

    @media  only screen and (max-width: 981px) and (-webkit-min-device-pixel-ratio: 2),   
            only screen  (min-resolution: 192dpi) {  

              body {background:#f00;}

    }

If I would just limit myself to iPhone 5 (yes I know that’s not the way to go, but just for this typical situation), I would expect that I could use breakpoints max-width:578 for landscape and max-width:575 for portrait, but that doesn’t seem to be the case. Uhhhh…?!?

[TheDoc]

Hmmmm. Your media query for a retina display should have nothing to do with the min/max width of the page, no?

My retina query is just this:

@media (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    /* stuff */
}

[Alen]

You shoyld be detecting pixel density not width for hi-def devices. Here’s part of my Sass mixin.

@media
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5){
    /* stuff */
}

[TheDoc]

@Ed, you mean the one that’s under the Old Stuff (don’t use, keeping for posterity) heading? ;)

[Senff]

@TheDoc:

Hmmmm. Your media query for a retina display should have nothing to do with the min/max width of the page, no?

Well, that’s the thing. I do want different things based on the width of the page. Something like this:

• regular screens: background is white
• screens smaller than 800: background is blue
• retina screens smaller than 800: background is red
• screens smaller than 400: background is yellow
• retina screens smaller than 400: background is green

Or should I just use the “general” retina media query and nest it in regular media query?

Just for context (since I don’t really want to use background colors, that’s just for example purposes): my page has a header background image, but for screens smaller than 800 the background image is a little different, and for 400 it’s another different background image. That works fine. But for retina screens I want those just to be better-quality images.

[Alen]

Would something like this work?

@media
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5),
  only screen and (min-width: 48em){
    /* stuff */
}

[Senff]

Nope.

[Senff]

I feel bad, so I’ve turned your example into code, @Senff: http://codepen.io/anon/pen/GgFqp

The problem I think you were having before is that you need to use the and operator to link 2 media queries that both need to be true.

That doesn’t seem to work either: http://codepen.io/senff/pen/CtLxk
On my iPhone, background is always white.

This is getting a little frustrating. Is it just not possible to have a media query that combines the screen width and the retina screen?

[Author]

Posts