Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Media queries for retina – the basics

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #151479
    Senff
    Participant

    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…?!?

    #151524
    TheDoc
    Moderator

    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 */
    }
    
    #151525
    Alen
    Participant

    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 */
    }
    
    #151543
    TheDoc
    Moderator

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

    #151584
    Senff
    Participant

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

    #151585
    Alen
    Participant

    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 */
    }
    
    #151595
    Senff
    Participant

    Nope.

    #151681
    Senff
    Participant

    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?

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.