I spend some time recently fiddling around with meta viewport, so I'll share some notes. First here are the specifications:
The blog posts A pixel is not a pixel is not a pixel and The two viewports are good to read describing the "problem" with zooming and viewport. The trouble is that high dpi mobile devices are zooming in by default. Speciality of the iPhone is that the user-agent string is totally the same for 320px iPhone 3 as for the iPhone 4 which is 640px wide. To get the nice sharp images on an iPhone 4 one needs to use 640px images and set the image width attribute to 100%. At my $work we resize images to exact size of the mobile devices. With this auto-zooming features of modern devices the life's getting more difficult.
And here is what I found regarding the <meta name="viewport"> tag. This are two+1 generally usable examples:
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/> <meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes, target-densitydpi=device-dpi"/> <meta name="viewport" content="width=640, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes, target-densitydpi=device-dpi"/>
- width=device-width will tell the browsers to use the native resolution of the phone.
- target-densitydpi=device-dpi is needed for the phones with Android and a high-resolution (or high-dpi, example screens with 480x800, like Samsung Galaxy S) to not zoom. Note that the target-density is at the end of the content attribute. This is because it is unrecognised by iPhone and if iPhone encounters and unrecognised option in the viewport content attribute it stops parsing and will ignore the rest of the string.
- maximum-scale=1.0 together with user-scalable=no is there to forbid zooming in. If the page is optimized for the mobile resolution it's ok to disable it.
- width=640 setting the proper (fixed) width is also necessary for the windows mobile phones with IE in order to have the native resolution.
One final thought - Why don't the mobile browsers send the display width and height in the http headers? This will save us a lot of troubles with device detection.