51

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Myles Gray
  • 8,711
  • 7
  • 48
  • 70

4 Answers4

56

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
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    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
7

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

mattbilson
  • 558
  • 2
  • 5
  • 15
  • If iPhone 4 max device width is 480 ([which it seems it is](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4)), 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
  • 1
    How's that for predicting the iPad 3 five months before release? :) – mattbilson Mar 29 '12 at 05:34
6

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

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

dalethedeveloper
  • 165
  • 2
  • 7
5

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.

mernen
  • 784
  • 5
  • 5
  • 1
    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 – Myles Gray Feb 21 '11 at 13:14
  • 3
    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