mobile safari: device rotation causes bad scaling of website

Question

i have a mobile website for iphone and ipad where i disable user zooming with

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

this works fine as long as the site is in landscape mode. the width of the website is exactly the width of the screen. then if i rotate the device into portrait mode it gets scaled down so that it fits the new (shorter) width. this is also ok.

but then if i rotate it back to landscape mode it is suddenly scaled to about 125% that means horizontal scrolling is now possible and zooming is not possible since initially disabled.

how can i make it back at 100% zoom when rotated back to landscape?

thanks!

Answer 1

try experimenting with maximum-scale and minimum-scale like so

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

and see if you can achieve what you are looking for..