1

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.

satoshi
  • 3,963
  • 6
  • 46
  • 57

1 Answers1

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.

Tom Clarkson
  • 16,074
  • 2
  • 43
  • 51
  • Thank you @TomClarkson. Is there any way to tell the iPhone to use 640px instead of 320px? – satoshi Nov 27 '12 at 11:01
  • No - see http://stackoverflow.com/questions/7674247 - but you probably don't really want to - the 640px iPhone 4 display is the same size as the 320px iPhone 3 display, and my fingers didn't get smaller when I upgraded my phone. – Tom Clarkson Nov 27 '12 at 11:11
  • I see what you mean, but I was planning to make a version specifically for high resolution mobile devices (such as iPhone 4+) using bigger fonts and images for higher quality. But thank you for your answer :) – satoshi Nov 27 '12 at 12:13
  • That's a bit different. Fonts can stay the same, because they are naturally scalable. For images, just use the retina images and set width or background-size so they get scaled down on the lower res devices. Just because it says it is 320px doesn't mean it won't properly render a 640px image in that space. If you really want to use different images, use the device-pixel-ratio filter I mentioned in addition to the width checks. – Tom Clarkson Nov 27 '12 at 13:12