How to target iPhone 3GS AND iPhone 4 in one media query?

Question

I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well.

I have established that the best method is to use @media from the CSS3 spec.

As such these are my media queries at the minute:

@media screen and (max-width: 1000px) { ... } 

Above is for small desktop and laptop screens.

@media screen and (max-width: 700px) { ... } 

Above is for the iPad and VERY small desktop/laptop screens.

@media screen and (max-device-width: 480px) { ... } 

Above is for iPhone 3GS- and mobile devices in general.

However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... } 

Now, the thing is... I want my nice shiny new iPhone 4 layout amalgamated with the iPhone 3GS and mobile device layout as they will both have exactly the same inner CSS code,

Therefore making my question;

How do I create an @media rule that points both the iPhone 4, 3GS and other mobiles to the same styles?

Answer 1

Because the iPhone and iPod touch measure max-device-width in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough:

@media only screen and (max-device-width: 480px) {     /* iPhone CSS rules here */ } 

You'll only need (-webkit-min-device-pixel-ratio: 2) if you need to target the Retina display separately.

Answer 2

BoltClock's answer seems pretty good to me at the moment.

However, thinking in to the future, if Apple (or another manufacturer) releases another device with a device pixel ratio of 2, this media query would be used for this device too.

I don't think it's out of the question to assume that this will happen, and that the new device could have a much larger screen, such as an iPad with a retina display.

To make this query only applicable to the iPhone 4 and previous iPhones (and any other device of a similar size)

@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {     /* iPhone CSS rules here */ } 

Unsure of [[IPHONE_4_WIDTH]] right now - don't have one on me, and some sites say 480, some say 960. Try replacing with both. (And let me know what you find :) )