Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
// Original code from
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) {
scales = [.25, 1.6];
doc[addEvent](type, fix, !!fix);

!!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"





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

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


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 ...

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.