This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.
After adding meta viewport tag for your mobile site its width is properly formatted for mobile browsers. However, there exists a common glitch you should be aware of.
On iOS devices, and on some Android devices, the mobile browser re-zooms the web page when the device orientation changes. The browser applies heuristics and try to determine a new zoom level after the rotation, but sometimes the result is not desirable. When you rotate from the portrait mode to the landscape mode, the page zooms in too much.
In our case, the project client specifically requested to disable this little feature if possible, as it was irritating the test users on iPad devices.
An example code going into HTML <head> section:
Please edit the scales part of the code for the desired min and max scaling level.
Note: Dynamic viewport manipulation is badly supported on older Android devices and contains many pitfalls.
1. More info
Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+
I’m new to responsive web design. I see that it’s not a new article, but since it has a good place in google, I decided to write my expereience, maybe this will help for others too.
This code seemed to work, but when I changed the orientation twice or more, it didn’t follow the change, it has zoomed back for the second time in landscape mode on my iPhone. So I think adding “maximum-scale=1” to the viewport meta is a better solution. The back is that pinch-zooming will be overall disabled by this solution, but I guess that one reason of responsive design is that we don’t really need zooming. Thank you anyway, I found this solution via the links posted above. Thanks again!
Pingback: Mobile Websites Orientation: zoom on orientation change issue | Techplusone Technical Blog
Thanx a lot for the script! I’ve checked a lot of solutions for this problem but not a single one worked for me.