Forum | Appery.io

Hello,
I would like to disable pinch and zoom feature completely in my app. Looks like by default zoom is disabled but when you put focus on input element on your page and then try to zoom it works. Sometimes users get confused by unexpected zooming and sometimes it is impossible to zoom back to normal app size. This is described here:

http://zsprawl.com/iOS/2012/05/comple...

My question is how can I implement this in my Appery project?

Hi Adam,

You can change meta tags either dynamically (using JS), or in sources. What is the problem you have?

Hello Katya,

Meta tags do not work - this is the problem I have. In the link I have posted above this code was supposed to solve the problem:

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

but I do not know how to implement it properly in Appery. I tried by creating JS asset and by attaching it to page load event but it does not work (pinch and zoom still working).

Hi Adam,

You should use it without handling "mobileinit" event. Just put this code in page.load:
pre
$.extend($.mobile.zoom, {locked: true, enabled: false});
/pre

Thanks Illya,
Not working unfortunately. Still able to pinch and zoom. Any suggestions?

Hi Adam.

Please try thr next solution http://stackoverflow.com/questions/29...
Let us know if it helps.

Hi Alena,

Many thanks for this link. This is what I did:

1) Created new JS asset:

function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('');
}

2) Attached zoomDisable() to page load event.

and finally unwanted pinch and zoom was gone.

So I am happy