IPhone Safari does not auto scale back down on portrait->landscape->portrait

iphoneiphone-standalone-web-appmobile-safarisafari

I have a very simple HTML page with this META tag for the iPhone:

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" />

Using the iPhone Safari, when the page loads in portrait mode it looks fine and the width fits the screen.
When I rotate the iPhone to landscape mode the web page is auto resized to fit the landscape width. Good, this is what I want.

But when I rotate back from landscape, the page is not resized back to fit the portrait width like it was before. It remains in the landscape width.

I want the iPhone to set it back to the right width automatically, just like it did for the landscape mode.
I don't think this should involve orientation listeners because it is all done automatically and I don't have any special styling for the different modes.

Why doesn't the iPhone resize the web page back in portrait mode?
How do I fix this?

UPDATE

I managed to get the iPhone to auto resize down but with a strange phenomenon of doing it only after an even number of rotations… Very very strange.
I use this META tag:

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Here's what I have to do to get it auto resized:
1. On load in portrait -> looks good.
2. Rotate to landscape -> resized to fit screen.
3. Rotate back to portrait -> no resize back.
4. Rotate to landscape -> still in size for landscape.
5. Rotate to portrait -> resized down to fit portrait screen.

Can someone explain this behavior??
I still want to know how to fix this and appreciate any assistance.

Thanks!
Tom.

Best Answer

This has to be a bug in iOS 4 Safari. Here's what my behavior was with the following meta tags (the second tag is to make it full screen):

<meta name="viewport" content="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

Page would scale correctly when going from portrait to landscape until I used the pop up keyboard to enter a value in a field - then it would stop scaling. Which would mean if I used the keyboard in landscape it would be too large when I went to portrait, or vice versa.

Switching using the following meta tags fixed it... Thanks to the other answers on this page.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
Related Topic