Ios6 ios 7媒体查询环境

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

当我在横向时，媒体查询不起作用，宽度/高度（分别从

$（窗口）.width（）

和

$（窗口）.height（）

给出）是：768/519，而不是通常在ios6 safari和chrome中显示的1024/672 px

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

是否有其他人发现了该缺陷/怪癖和/或解决方法

*更新* 这是我的标题代码（以及wordpress代码）：

---

您会在HTML中包含此元标记吗

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

请尝试将其改为：

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

---

改用纵横比和设备纵横比。防弹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 */
}

---

看到我更新的消息，我想这可能与双视口元有关：/你试着去掉标记了吗？这似乎完全没有必要，因为之前的meta标记中已经设置了宽度。我昨天注意到了它，今天开始工作时做了测试。你是真的，它覆盖了初始比例=1（我不知道这是怎么发生的，我复制了两次视口meta）。。。值得注意！实际上我还需要一个。iOS6与iOS7的对比。显示屏周围的chrome已经改变，iOS7 Safari提供了比iOS6 Safari更多的空间，因此适合iOS7的设计在iOS6上不起作用，但设备是相同的。

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