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.
This can be worked around by resetting the viewport with Javascript after the orientation changes.
An example code going into HTML <head> section:
<!--
Don't break scale on iPad rotate.
By default iPad re-zooms the page when the device orientation changes.
The heuristics here do not work always; our page got zoomed in
though it should be max zoomed out.
This snippet fixes the situation so that you can still zoom in, but when
the device is rotated the scale is restored.
-->
<script type="text/javascript">
(function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>
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
- http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug
- http://adactio.com/journal/4470/
- http://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon
![\"\"](\"https://www.feedburner.com/fb/images/pub/feed-icon16x16.png\")
Subscribe to RSS feed ![](\"https://opensourcehacker.com/wp-content/uploads/twitter-24.png\")
Follow me on Twitter
![](\"http://opensourcehacker.com/wp-content/uploads/facebook-24.png\")
Follow me on Facebook ![](\"https://opensourcehacker.com/wp-content/uploads/googleplus.png\")
Follow me Google+
Hi!
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.