Question

I am using the media query in css to differentiate iphone and ipad

Here’s my code:

/* iphone 3 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) { ... }

/* iphone 4 */
@media only screen and (min-device-width : 640px) and (max-device-width : 960px) and (orientation:portrait) { ... }

/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { ... }

/* i have the same for landscape */

Now I have a resolution conflict, the iphone 4 use the same resolution as the ipad and vice versa.

How can I fix this?

Answer 1

Modify your iPhone 4 media query to target high density pixel displays (retina = iPhone4)

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

---

Didn’t notice you reopened the question with an expansion so here is a reworked answer to target both iphones (3 and 4) and ipads.

Breakdown of what you should expect:

• On regular browsers you should get the teal background color.
• orange on an ipad (landscape).
• black on an ipad (portrait)
• red on an iphone 4 (portrait)
• pink on an iphone 4 (landscape)
• green on regular smartphones, e.g Androids (landscape)
• purple on a regular smartphone (portrait)

CSS

body {
    background-color:teal;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    body {
        background-color:yellow;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    body {
        background-color:orange;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    body {
        background-color:black;
    }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
    body {
        background-color:red;
    }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
    body {
        background-color:pink;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
    body {
        background-color:green;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    body {
        background-color:purple;
    }
}`<!-- language-all: lang-css -->

I reformatted the @media queries found in this fine article over at CSS-tricks to comply to some iphone4-specific bits, but overall this media query set should cover both iphones (3 and 4 with separate media queries) and ipads as well.

Here is a demo you can try in your i-devices.

http://jsfiddle.net/andresilich/SpbC3/4/show/

And you can also try out the queries over at http://quirktools.com/screenfly/ to see how they stack up. One thing though, the screenfly site does not differentiate between iphone 3 and 4 because regular browsers skip the webkit only -webkit-min-device-pixel-ratio : 1.5 pixel ratio count so you will get better results testing it out in your actual device.