Zoom-on-rotate fix for WebKit mobile browsers
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
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
- [a class="reference external" href="http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug"]http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug