Search code examples
cssmedia-queries

Media Query for iPhone 4 and 4s

Can we differentiate between 4 and 4s in css? I've a problem in the following code, please help to fix.

/* iphone 4S retina landscape, 3.5inch */
@media only screen and (-webkit-min-device-pixel-ratio : 2) and (device-aspect-ratio: 2/3) and (orientation : landscape) {
}

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

/* iphone 4 landscape, 3.5inch */
@media only screen and (-webkit-min-device-pixel-ratio : 1) and (device-aspect-ratio: 2/3) and (orientation : landscape) {
}

/* iphone 4 portrait, 3.5inch */
@media only screen and (-webkit-min-device-pixel-ratio : 1) and (device-aspect-ratio: 2/3) and (orientation : portrait) {
}
Solution

  • In web browser at iPhone4 and 4s, there is no difference, so that is why 4 and 4s have the same css media query.

    In fact, the most different between 4 and 4s is, 4s is faster than 4.