Question

here is my meta for the viewport:

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

and this is my 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; }
}

why iPad3’s css overwrite the iPhone4’s one?

Answer 1

Do you have CSS outside of these queries?

Your issue is that your iPhone queries have min-device-width:640px but an iPhone (even the 4) is 320px wide [with a scale of 2, yielding 640 points of usable space], so those queries are not being applied (but neither should the iPad ones, which is why I’m asking if there is additional CSS outside of the queries)