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

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.

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 :) )

I have been hunting for a way to specifically target the iPhone 3 / 3GS per the second part of the request. The most acceptable solution I've found is to tailor the media queries to the fixed parameters of an iPhone 3.

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

In order to work this query requires that you use Safari's viewport meta tag to fix the browser to 100% with the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

There are a small number of Android phones that will also get picked up on that query. With the Android Market showing 18.4% of active phones in the potential screen size range of 320x480, only a subset of that will match the device-pixel-ratio on the stock webkit browser. Not perfect, but better than nothing at all.

Lists of phone resolutions

Slightly outdated but thorough: http://cartoonized.net/cellphone-screen-resolution-by-size.php
Only 3 listed as a potential match here: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
Android Market weekly snapshot: http://developer.android.com/resources/dashboard/screens.html

All information was considered as of post date.

Also per mernen's comment #2 to his post here are the docs to target Android devices by pixel density: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

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

Related

Recent Posts