Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist
View ios-viewport-scaling-bug-fix-original.js
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";
}
}
}
View ios-viewport-scaling-bug-fix-original.js
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]') : [0];
 
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?

Owner

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

Owner

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.

Owner

Works fine on my iOS 3.1.3.

.25.toString() -> "0.25"

awesome!

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

Anydog commented

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

cheeaun commented

@Anydog I would recommend this instead https://github.com/scottjehl/iOS-Orientationchange-Fix

Anydog commented

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.