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;
    }
}

Answer 2

Media Queries only for the iPhone 4/4S

Only iPhone 4/4S (both: landscape and portrait)

@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)
{
    ...
}

Only iPhone 4/4S (portrait mode)

@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) and (orientation:portrait)
{
    ...
}

Only iPhone 4/4S (landscape mode)

@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) and (orientation:landscape)
{
    ...
}

iPhone 5 only

@media screen and (device-aspect-ratio: 40 / 71) {
    ...
}

More

Also more

Answer 3

I would suggest using absolute width in pixels like so:

@media (min-width: 768px) and (max-width: 991px) {

}

Just replace the widths with the phone sizes and you should be good.

Answer 4

This following code for sure.I have tried and got it working.Just thought it might help someone save time. Sources:this and this

/*iPhone 4 and 4S landscape*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 

h1, .h1{
    font-size:26px;
}

.mt-4x{
    margin-top:20px !important;
}
}

/iPhone 4 and 4S portrait/

@media screen and (max-device-width: 480px) and (orientation: portrait){

h1, .h1{
    font-size:26px;
}

.mt-4x{
    margin-top:20px !important;
}
}