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

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.