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" />
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">