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?

Solution 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.

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

Solution 3

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

Solution 4

I'm not sure I follow your question. Did you try your queries on the iPhone 4? device-width is measured in logical pixels, not physical ones, so the iPhone 4 still fits the max-device-width: 480px criteria.

Same goes for high-end Android smartphones, which have a pixel ratio of 1.5: the Nexus One has a physical screen of 480x800, logical screen of 320x533.

View more solutions

Comments

[Myles Gray]

You seem to have this the wrong way round, if it's physical screen is 480x800 and logical is 320x533 that would mean it's ratio is 0.X not 1.X as logical<physical?

[mernen]

The ratio is defined as physical/logical, no the other way around: iPhone 4 has 640 physical pixels for 320 logical ones, so its device-pixel-ratio is 2. Nexus One has 480 physical pixels for the same 320 logical ones, resulting in a ratio of 1.5. Also, many low-end Android devices have low-density screens, 240 physical pixels for 320 logical, so their pixel ratio is (presumably; never tried it myself) 0.75.

[mattbilson]

If iPhone 4 max device width is 480 (which it seems it is), you of course won't need the second part of this query (after the comma). And the initial question becomes null and void (as mentioned by memen below)

[mattbilson]

How's that for predicting the iPad 3 five months before release? :)

[ErezSO]

the second rule only screen and (-webkit-min-device-pixel-ratio: 2) is not required to handle the iphones 4 and 4s because we are using the media query max-device-width. Also this rule will be validated for the new iPad which has a device width greater than 480 pixels but a pixel ratio of 2. So @media only screen and (max-device-width: 480px){ } is enough.

[FRAGA]

And then comes apple with its retina Macbook and creates a real mass. All over again