Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
// 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";
}
}
}
// 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);
@mathiasbynens

This comment has been minimized.

Show comment Hide comment
@cheeaun

This comment has been minimized.

Show comment Hide comment
@cheeaun

cheeaun Apr 5, 2011

!!fix just returns true right?

cheeaun commented Apr 5, 2011

!!fix just returns true right?

@jdalton

This comment has been minimized.

Show comment Hide comment
@jdalton

jdalton Apr 5, 2011

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)

Owner

jdalton commented Apr 5, 2011

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)

@cheeaun

This comment has been minimized.

Show comment Hide comment
@cheeaun

cheeaun Apr 5, 2011

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

cheeaun commented Apr 5, 2011

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

@jdalton

This comment has been minimized.

Show comment Hide comment
@jdalton

jdalton Apr 5, 2011

Beat ya to it :P

Owner

jdalton commented Apr 5, 2011

Beat ya to it :P

@cheeaun

This comment has been minimized.

Show comment Hide comment
@cheeaun

cheeaun Apr 5, 2011

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

cheeaun commented Apr 5, 2011

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

@mathiasbynens

This comment has been minimized.

Show comment Hide comment
@mathiasbynens

mathiasbynens Apr 5, 2011

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.

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.

@jdalton

This comment has been minimized.

Show comment Hide comment
@jdalton

jdalton Apr 5, 2011

Works fine on my iOS 3.1.3.

.25.toString() -> "0.25"

Owner

jdalton commented Apr 5, 2011

Works fine on my iOS 3.1.3.

.25.toString() -> "0.25"

@shichuan

This comment has been minimized.

Show comment Hide comment
@shichuan

shichuan Apr 12, 2011

awesome!

awesome!

@praveennair

This comment has been minimized.

Show comment Hide comment
@praveennair

praveennair Oct 28, 2011

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

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

This comment has been minimized.

Show comment Hide comment
@Anydog

Anydog May 12, 2012

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

Anydog commented May 12, 2012

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

@cheeaun

This comment has been minimized.

Show comment Hide comment
@cheeaun

cheeaun May 12, 2012

@Anydog

This comment has been minimized.

Show comment Hide comment
@Anydog

Anydog May 12, 2012

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

Anydog commented May 12, 2012

@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