Adam Garbinski
Posts: 0
Joined: Sat Sep 28, 2013 5:33 pm

How do disable pinch and zoom?

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?

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

How do disable pinch and zoom?

Hi Adam,

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

Adam Garbinski
Posts: 0
Joined: Sat Sep 28, 2013 5:33 pm

How do disable pinch and zoom?

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

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

How do disable pinch and zoom?

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

Adam Garbinski
Posts: 0
Joined: Sat Sep 28, 2013 5:33 pm

How do disable pinch and zoom?

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

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

How do disable pinch and zoom?

Hi Adam.

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

Adam Garbinski
Posts: 0
Joined: Sat Sep 28, 2013 5:33 pm

How do disable pinch and zoom?

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 :-)

Return to “Issues”