Mobile Website: Orientation change from portrait to horizontal

Question

I'm developing a mobile website for iPhone and Android browsers.

As I was playing around with an Iphone 4 and a HTC Desire I found out that the two devices react differently on orientation change. If I load the website in portrait mode and then rotate the device to horizontal mode, the Iphone zooms closer to the content using the same width (320px). With an Android device, if I rotate it seems that the viewport changes, so there isn't any zooming going on (width >320px), instead the websites gets wider.

My current viewport (I already tried setting a fixed width of 320px):

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Now my question: Is there a way to make the Android Webkit browser "zoom in" like an iPhone on orientation change from protrait to horizontal?

Thank you very much in advance!

Andrew

Answer 1

This functionality is present on iPhone because of the way the viewport works. Here is how to disabled it on all devices and thus creating the same user experience.

If you set your viewport to this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0," />

then it will prevent the iPhone from "re-zooming" back to device-width. This ALSO disables zoom entirely though. Don't have a better solution at this point.