Search code examples
cssiphoneresponsiveretina

Do retina devices NEED their own media queries?

I have several media queries that are being ignored on retina devices - for example, the iPhone 6 Plus. The iPhone 6 Plus' screen min-device-width is 414px. Using the following media query, I would expect the phone would make the customClass div have a 100% width. But the divs using this class are still 33.33333%. (I've simplified the code below for the example, removing floats etc.)

For example, I have the following CSS:

.customClass {
   width: 33.33333%;
}

@media screen and (max-width: 800px) {
    .customClass {
      width: 100%;
    }
}

I have this in my header, by the way:

<meta name="viewport" content="width=device-width, initial-scale=1">

I thought with the viewport meta tag above, it would cause the device width (414px) to be used as the width, so it should use the 100% width on .customClass.

It seems like the higher pixel density is causing it to ignore the 800px width query, but I'm not sure why.

After lots of reading and research, I'm finding that you'd only want to use retina media queries if you are using @2x images, for example, to target all retina screens (and not for site layout like I'm doing above). So I wouldn't think I'd need retina media queries like only screen and (min-device-pixel-ratio: 2) in order to deliver 100% width to an iPhone 6 Plus.

I'm trying to avoid device specific media queries like this because there are so many devices to worry about, it seems impractical. (Also I tried some of them, and they do work at targeting specific devices like the iPhone 6 Plus, but I'm more looking to target anything under 800px in one fell swoop.)

So to quickly sum it up, if my example code is correct and the answer to the title question is a simple "No", then is there something else I'm missing when targeting retina devices? Possibly a bigger sitewide issue? (I'm not asking for you to find this issue, if it's something else I will dig deeper.. but it's a huge site ;) )

Thanks!

Solution

  • No. There is no NEED for retina-specific media queries.

    In the modern world you would use vector or font-icons that can be scaled indefinitely without loss of quality. Concerning photos it would be pointless to add different for retina displays.

    Your code above is correct. Keep in mind that the rendered resolution is actual device resolution/pixel density. This means that the iphone is 750x1334px with a pixel density 2 (@2x) so the actual rendered resolution is 375x667px.