ios 7 media queries landscape

Question

I am having a strange problem on IOS7 browsers (safari and chrome).

When I am in landscape, the media queries do not work and the width/height (given from $(window).width() and $(window).height() respectively) are: 768/519 instead of 1024/672 px that usually was showing in ios6 safari and chrome.

In portrait, it is 768/927 which is correct.

Has anyone else found that bug/quirk and/or workaround?

* Update * This is my header code (along with wordpress code):

<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />

Josh Minzner · Accepted Answer · 2013-09-30T14:57:33.370

1

Would you happen to be including this meta tag in your HTML?

<meta name="viewport" content="width=device-width">

Try changing it to this instead:

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

edited Sep 30 '13 at 14:57

answered Sep 30 '13 at 12:36

Josh Minzner

560
1
5
13

See my updated message, I think it might have something to do with the double viewport meta :/ – Panagiotis Sep 30 '13 at 16:14
1

Did you try getting rid of the tag? It seems completely unnecessary as the width is already being set in the meta tag before it. – Josh Minzner Sep 30 '13 at 20:04
I've noticed it yesterday, doing the tests when I get to work today. – Panagiotis Oct 01 '13 at 05:10
You were true, it overrode the initial-scale=1 (I don't know how this happened and I copied twice the viewport meta)... kudos for noticing! – Panagiotis Oct 01 '13 at 07:37

sdesapio · Answer 2 · 2013-10-17T01:27:18.797

Use aspect-ratio and device-aspect-ratio instead. Bulletproof iOS media queries...

/* iPad: portrait */
@media screen and (aspect-ratio: 768/716) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 768/1024) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPad: landscape */
@media screen and (aspect-ratio: 1024/372) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 1024/768) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPhone 3.5" screen: portrait */
@media screen and (aspect-ratio: 320/220) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 320/480) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 3.5" screen: landscape */
@media screen and (aspect-ratio: 480/114) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 480/320) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 4" screen: portrait */
@media screen and (aspect-ratio: 320/308) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 320/568) and (device-aspect-ratio: 320/568) {
    /* styles here */
}

/* iPhone 4" screen: landscape */
@media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
    /* styles here */
}

Actually I need one more. iOS6 vs iOS7 landscape. The chrome around the display has changed, iOS7 Safari provides more space than iOS6 Safari so designs that fit iOS7 don't work on iOS6 but the devices are the same. — gman, May 02 '14 at 10:44

ios 7 media queries landscape

2 Answers2