As every iOS programmer knows, you can easily disable zoom in your webapp with the following viewport meta tag:

1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no">

However, while coding my most recent App, BriteLite, I noticed that sometimes when the user would be tapping all around on the screen, that a doubletap would trigger somehow and zoom in the App. Since the App has zooming disabled in the meta tag, it wasn’t simple to unzoom the window when this bug would trigger. After a lot of messing around, the best I could tell is that when a user double tapped on the 1px border of a div, it would trigger this zoom. Since it takes precision to hit a 1px border twice, it wouldn’t trigger often.

Fixing it was rather simple, once I figured out how to override zooming capabilities in jQuery Mobile 1.1.0. All I had to do was add the following:

1
2
3

$(document).bind( "mobileinit", function(event) {
    $.extend($.mobile.zoom, {locked:true,enabled:false});
});

$(document).bind( "mobileinit", function(event) {
	$.extend($.mobile.zoom, {locked:true,enabled:false});
});

And of course, make sure you call the mobileinit before you load jQuery Mobile. Has anyone else had this issue? I couldn’t find it documented anywhere.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.