Media Query for iPhone 4 and 4s

Question

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

Answer 1

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.

Answer 2

I'd like to reply that contrary to Billy Yeah's answer, I believe there is a difference in the web browser between iPhone4 and 4s, based on using Browserstack's Live feature. This may be because iPhone4 runs on iOS4, and iPhone 4S runs off iOS 5.1 or iOS6.

iPhone4 doesn't load many webfonts that iPhone 4S does, and also renders other things differently.

I'm still looking for a media query to differentiate the two, if there are any suggestions!