0

这是我的视口元数据：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">

这是我的CSS：

/* ---------- */
/* iPad 3     */
/* ---------- */

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: landscape) {

    body { background: red; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: portrait) {

    body { background: orange; }
}

/* ------------ */
/* iPhone 4     */
/* ------------ */


@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: landscape) {

    body { background: blue; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: portrait) {

    body { background: gray; }
}

为什么 iPad3 的 css 会覆盖 iPhone4 的 css？

4

2 回答 2

1

你有这些查询之外的 CSS 吗？

您的问题是您的 iPhone 查询有min-device-width:640px但 iPhone（甚至是 4）的宽度为 320px [比例为 2，产生 640 个可用空间点]，所以这些查询没有被应用（但 iPad 的查询也不应该，这这就是为什么我要问在查询之外是否还有其他 CSS）

于 2012-08-02T13:58:52.437 回答
0

尝试更改设备特定 css 的顺序（例如，将 iPhone css 放在 iPad css 之上）。我不知道它会解决你的问题。但是，我在 HTML5 样板模板中看到了这一点。An di 在某处读过它，我们应该始终首先为小型设备编写 css 代码。

于 2012-06-02T10:52:15.220 回答