media queries for iPhone 4, iPhone 4s and iPhone 5

Question

/* iphone retina portrait, 4inch (iphone 5 and up) */
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 40/71) {
    body {
        background-color: red;   
    }
}

/* retina, iphone, portrait, 3.5inch (iphone 4) */
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 2/3) {
    body {
        background-color: yellow;   
    }
}

trying but not working, any ideas, i have to exactly differentiate between iPhone 4, iPhone 4s and iPhone 5.

Answer 1

For the iPhone5, I use pixel ratio 1.5. For the iPhone 4/4S, I use a combination of pixel width and pixel ratio.

/* iPhone5+ */ 
@media
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5){
    body {
        background-color: red;
    }
}

/* iPhone 4/4S */
@media 
    only screen and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (device-aspect-ratio: 2/3)
{
    body {
        background-color: yellow;
    }
}