iPhone 4+ defaults to 320px resolution for web apps, I want to use the full 640px

Question

iPhone 4+ defaults to 320px resolution for web apps, I want to use the full 640px.

Can I change this iPhone 4+ behavior to report real resolution?

EDIT: So i can use,

<meta name="viewport" content="width=640" /> 

but how can I be sure it's an iPhone 4+ before setting this tag?

Solution

The short answer is: you can check the user-agent and set the meta tag with JavaScript.

The long answer is: don't do that. I was originally pretty confused about this, too, when I started developing for mobiles. The iPhone 4 (and other high-res devices) actually display the same page width as their predecessors. This is probably due to the fact that sites everywhere would look totally small and probably messed up if they did otherwise. There is a difference, though. High-res phones simply display everything at a higher resolution (but the same dimensions).

This doesn't matter for things like text and background colors but you'll find that images don't look as crisp on an iPhone - that's because they're being resized up. What I do is double the resolution on images, give them fixed with and height to their "non-highres" size, and use -webkit-background-size: 100% 100%;. This way older devices display it like normal, and high-res devices look crisp and nice. The caveat is that this is making your image file size bigger.

For more information on why a pixel is not always a pixel see this link: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Additionally if you wanted to target high-res devices specifically with CSS. You can use a media query:

@media screen and (-webkit-device-pixel-ratio: 2) { 
  body{
     background-color: red;
  }
}