iPhone Safari Viewport Scaling Bug 121
Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait to landscape view (you should see the page being scaled up). This is a known bug for a long time. Today I'm going to share some tips on how to fix this bug.
Problem (view demo)
View the demo page with an iPhone and rotate the phone from portrait to landscape.
Solution 1: Quick Meta Tag Fix (view demo)
A quick fix to this issue is by setting maximum-scale=1 in the viewport meta tag. This fixes the problem, but the downside is that the page will no longer be zoomable with the zoom gesture.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Solution 2: Javascript (view demo)
For usability concerns, setting maximum-scale is not an ideal solution because user can not zoom the page. Fortunately, there is a Javascript fix which was discovered by @mathias, @cheeaun and @jdalton. Add the following Javascript in the <head> to fix the viewport scaling bug on orientation change. With this Javascript fix, the page remains zoomable.
<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>
Comments?
Do you know more solutions to fix this viewport scaling bug? The Javascript fix is particularly useful for coding responsive web design. Please share in the comments.
You might want to use comma instead of semicolon in the viewport tag. Seems to trigger some errors in some browsers.
https://github.com/paulirish/html5-boilerplate/issues/626
Nice tip!
Sweet, the ‘,’ got rid of an error in Safari. Thanks! Nice tip too Nic.
I use the meta tag fix, I don’t mind that it removes manual zooming, we’re generally trying to imitate native apps anyway, and you can’t zoom in on most native apps.
You can use width=device-width:
I’m using Jeremy Keith’s fix, it’s quite similar to solution 2 http://adactio.com/journal/4470/
Does anyone know if the scaling bug is still present in iOS5?
Yes, and it’s not a bug.
Well, its buggin’ some people ;)
Nick, the “demo” link on this text is wrong: “View the demo page with an iPhone and rotate the phone from portrait to landscape.”
The JS solution offered doesn’t work after the user starts to zoom in / out of the page. If they zoom in, then back out, and then change orientation, they’re met with the same scaling bug.
I also tried the Adactio solution referenced, but the script there hung up my page and it never fully loaded. Not sure why.
I second that from Russell, after zooming in and rotating backwards / forwards once the same bug is presented.
In this case, the meta solution is a much better solution.
thanks remah i think i may been having with this JS
Thanks for sharing. This tutorial will help me.
This great articles, I prefer the java-script matter. I wish I can contribute some viewport idea, but I don’t have such knowledge.
Nice little resource. Thanks
Thanks for sharing this fix, very helpful! A designer I work with provided some additional mobile design tips in her recent blog post. (http://www.back40design.com/news/m.blog/22/mobile-website-designers-need-to-do-less)
Thanks again, I look forward to seeing more posts like these.
Or you could just use…
…which fixes the original issue and allows you to set whether to allow user scaling or not.
…sorry, I put this in the wrong place – see below for a JavaScript free fix to this problem.
Tks for the tip. Hope Apple fix it.
yeah you really need to thin this through if your working with zoomable content pretty nice answers though. I would definitely error on the javascript side of things for web design always works.
I’m pretty sure as long as your site is 980px wide or less, that won’t happen.
I normally add this meta tag for all website that i made for mobile devices, the user shouldn’t be able to zoom in and out too.
Sorry, add this: width=device-width,initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no,
Just set…
width=device-width,minimum-scale=1.0, user-scalable=yes|no
…fixes the issue describe above and still allows you to set whether the page is resizable by the user or not.
This one sounds like the best solution. Thanks, Ian!
This fix by Ian works perfectly, why is this not in the article?
This doesn’t work generally. I can’t even find a combination where it does.
This one works perfect for me! Thanks :)
Ian, you’re correct, and this works great.
The Javascript solution provided here works for iPhone, but causes problems with iPad. Your addition of the user-scalable=yes|no parameter solved the problems for both devices.
Thanks!
nice tip
helpful thanks
Nice tip!