Search code examples
cssgoogle-chromeipadmedia-queriesretina-display

Testing iPad 4th Gen/Retina Display

EDITED Aug 26th, 2015

Ok, this question might be a bit rough because this project is still in Dev stages so legally I am not allowed to share it yet to show my problem in real time.

The problem I am having is that I am building a site for a client and when we began the testing phases I passed every test except for iPad 4th gen. We then began to discover that all my code really looks monstrously large when viewed in ANY retina display (4th/5th gen, iPad air).

The problem isn't that the vh/vw properties aren't working, the problem is that suddenly 20vh (20% of the viewport height) is massive. I am using the padding of an inner container object to vertically center all content within its parent container by using padding-top: 20vh; padding-bottom: 20vh;.

I have been trying solutions here that involve targeting ONLY retina displays and none have worked at all. Heres what I have tried to target retina with...

  • @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
  • @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { /* STYLES GO HERE */}
  • <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0">

Problem is that doing all these techniques also targets iPad 1/2/3 as well for some reason and it is messing up my previously written code.

Solution

  • vh units are a newer css3 unit of measure so that older browsers are going to ignore them. So normally you are going to use a fallback with vh units. Something like:

    .container {
height: 1024px;
height: 100vh;
}

    Browsers that don't understand vh will skip it and use pixels.

    However, Can I Use mentions that vh units are not fully supported until iOS 8. And it mentions, there is some "buggy behavior" in prior versions of Safari for iOS. It then provides as a work around to the issue, which may be useful.

    So maybe this so called buggy behavior is what you are running in to.