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 say this occurs with width is set to device-width, which I have indeed found, though not consistently so. Can anyone confirm that it doesn’t happen if you set width to the actual width of your site, eg:
So far as I can see setting the actual width accomplishes the same thing as setting to device-width, at least for me, but if it clears up the scaling bug then obviously that is what I should go with. I would appreciate any feedback on this.
this was the eg:
meta name=”viewport” content=”width=480″
didn’t show because of angle brackets
In my further testing, I find that setting the width to an actual pixel value rather than device-width makes this scaling problem go away completely. I also find that it is hard to reproduce the scaling bug when using device-width. Oddly, it happens consistently on your own demo page, yet in my recent experiments I was able to reproduce it only once in several hundred orientation changes. This to me seems more of the nature of an odd quirk that sometimes but hardly ever happens, yet clearly on your demo page it happens consistently. The major difference between your code and my experiments is that I don’t use “initial-scale=1.0″. It seems to me that it is this that may be responsible for the ‘bug’ as a consistent event.
yes, its amazing work
Actually, John, setting the viewport width to exact pixels doesn’t help. Check out:
http://ryancannon.com/bugs/viewport.html
It even gets the initial scale wrong, and scales inconsistently when moving from landscape to portrait.
Third link of demo is wrong
I was developing a landing page using less framework and was wondering why the iPhone wide layout wasn’t scaling correctly. I have tried your fix and it is now scaling perfectly.
That is a nice one, thank you.
That’s a good tehnique, thank you.
This script works although it needs to be updated so (as people above pointed out) when you change orientation, it snaps back to just the viewport width.
Another point to make is that yes, setting maximum-scale=1 or user scalable=no solves this problem, even with very well designed responsive sites there will be people who will need to zoom in for some content.
There are many situations where this could be the case and you cannot design for every device. It’s just good practice to include as much accessibility in your designs as possible.
Well said Joshua
Thanks for an awesome site, I really learn a lot from you, and the great thing is it is stuff that i can implement into my everyday use. i just have one issue with this javascript fix, all works fine until i zoom in or out, then it is basically back to square one where it act up with its usual bug…. am I the only one picking this up? am I doing something wrong?
No, Gavin, your observations are correct. Read the first two comments of the authors of the script at https://gist.github.com/901295 .
Works perfect!!
Thanks!! :)
It works! :D Many thanks
http://www.mycheapmax.com/http://www.mycheapmax.com/
I have a 480px width and use the following:
In potrait, why doesn’t it scale down my site? It’s still 480px width, I thought with the ‘width=device-width’ , it’s suppose to scale it down…
Any explanation is very much appreciated…thanks
it doesnt work perfectly though
can open zoom one time
can only***** zoom one time
Thanks for info..i like style your writing of discription..full of info..greating..succes for you…
Thanks for info..greating..succes for you..
Your articel its verry good..thanks for share..see you articel again..
good post..greating..succes for you..
Same problem in my Projects, Hope this will help me to fix my view port problem.
helloo… i like your post.. full of info…