Question

这是视口的元数据：

<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的？

Answer 1

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

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

Answer 2

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

iPad3媒体查询覆盖了iPhone4的

2 个答案: