Media query ipad vs iphone4

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)          


        

Answer 1

Great answer on using the colors to detect device and orientation. iPhone 4 did not work though and only rendered as either green or purple backgrounds.

I found this article which shed some light. http://www.hemmachat.com/2011/04/21/iphone-website-for-good-beginnings/

Now using the pixel ratio of 2 instead I can now get red and brown on an iPhone 4.

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

/* iPhone 4 landscape */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px){
    body {
        background-color:brown;
    }
}