Question

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

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

在肖像方面，这是正确的768/927。

是否有其他人发现了bug /怪癖和/或变通方法？

*更新* 这是我的标题代码（以及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 */
}

ios 7媒体查询格局

2 个答案: