ios6 - ios 7 媒体查询景观

Question

我在 IOS7 浏览器（safari 和 chrome）上遇到了一个奇怪的问题。

当我在横向时，媒体查询不起作用，宽度/高度（分别从$(window).width()和给出$(window).height()）是：768/519 而不是通常在 ios6 safari 和 chrome 中显示的 1024/672 像素。

在纵向上，它是正确的 768/927。

有没有其他人发现错误/怪癖和/或解决方法？

* 更新 * 这是我的标题代码（连同 wordpress 代码）：

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

Answer 1

您是否会在 HTML 中包含此元标记？

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

尝试将其更改为此：

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

Answer 2

请改用纵横比和设备纵横比。防弹 iOS 媒体查询...

/* 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 */
}