CSS media queries on iPhone

Question

I'm building an app for iPhone, iPad, Android and BlackBerry. The app only has to work in portrait mode (i.e. if you rotate the mobile device in landscape orientation, nothing happens). The app has to display differently depending on the resolution:

• If the screen width is <= 240px: micro mode (mainly for BlackBerry)
• Otherwise, if the screen width is <= 480px: small mode (for normal res mobile devices)
• Otherwise, if the screen width is <= 767px: medium mode (for high res mobile devices like iPhone 4+)
• Otherwise (screen width >= 768px): big mode (for tablets)

Everything works fine when trying to resize the window on my browser, all the elements resize and reposition correctly depending on the viewport size. The only problem I'm facing is with iPhone 4 (and probably the same thing would happen on iPhone 4S and iPhone 5). In fact, it's using the small mode instead of the medium mode despite its screen width is 640px. I specified the viewport meta in the following way:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />

Does anybody know why this happens and how to fix it?

Thank you very much.

Answer 1

The iPhone is 320 CSS pixels wide, which is scaled from 640 device pixels.

You can filter by device-pixel-ratio:2 if you need to handle it differently to the non-retina version.