• Download Gist
ios-viewport-scaling-bug-fix-original.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
// Original code from http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
 
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.getElementsByTagName('body')[0].addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
ios-viewport-scaling-bug-fix.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
// My rewritten version
 
!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, !!fix);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, !!fix);
}
}(document);

!!fix just returns true right?

Yap, it minimizes a tiny bit more, but just being a bit silly. For example:
!function(a){function g(){f.content="width=device-width,minimum-scale="+e[0]+",maximum-scale="+e[1],a.removeEventListener(c,g,!0)}var b="addEventListener",c="gesturestart",d="querySelectorAll",e=[1,1],f=d in a?a[d]("meta[name=viewport]"):[];(f=f[f.length-1])&&b in a&&(g(),e=[.25,1.6],a[b](c,g,!0))}(document)

If you use UglifyJS, it'll compress true to !0 :P

Beat ya to it :P

lol, also, wondering if there's a difference between minimum-scale=1 and 1.0 for that meta viewport?

I was wondering about the same, but was afraid to use values like 1 and .25 instead of "1.0" and "0.25" because I hadn’t tested it. Seems to work fine in iOS 4.3.1, though.

Works fine on my iOS 3.1.3.

.25.toString() -> "0.25"

Hi,

I have tested the code on both IPAD and Iphone. It works fine when change in orientation too.

Scenario:
Pinch zoom the content in portrait mode and zoom back it to normal. Now change the orientation the content (font-size) gets zoomed without any gesture. Zoom out and back to portrait it works fine. Just change the orientation to landscape again still the content zoom without any gesture. This keep occurs until unless I refresh the page.

thanks and regards
nair

How to implement this ? Is there any other javascript needed ? I put this code inline, but it doesn't work. Anyone ... ?

@cheeaun: Thanks for recommendation - however, I implemented it and I lost orientation media queries adaptation to landscape/portrait screen resolutions ... Hmm ... Really don' understand ...

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.