Take the 2-minute tour ×

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.


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?

share|improve this question
add comment

4 Answers

up vote 51 down vote accepted

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:

    /* iPhone CSS rules here */

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

share|improve this answer
Perfect! Thanks :) –  Myles Gray Feb 17 '11 at 16:34
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. –  ErezSO Jun 24 '12 at 19:28
And then comes apple with its retina Macbook and creates a real mass. All over again –  FRAGA Jul 25 '12 at 22:16
add comment

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

share|improve this answer
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 Oct 20 '11 at 23:37
How's that for predicting the iPad 3 five months before release? :) –  mattbilson Mar 29 '12 at 5:34
add comment

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.

share|improve this answer
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? –  Myles Gray Feb 21 '11 at 13:14
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. –  mernen Feb 23 '11 at 14:25
add comment

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:


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

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

share|improve this answer
add comment

Your Answer


