CODEWITHSUNDEEP
ioscordovawkwebviewpinchzoomcordova-ios
Daniel Dudas
Daniel Dudas

Reputation: 3002

Disable pinch-to-zoom in iOS 10 in Cordova/Phonegap app

I have a mobile app build with phonegap (cordova) and the app is live on app store, but this new feature of iOS10 beta:

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

make the app zoomable and it totally broke the design of the app when zoomed.

Maybe this is a feature for websites on mobile (or not), but I want to be able to disable this for a hybrid mobile app

This is how the viewport looks like in index.html

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=medium-dpi, width=device-width, height=device-height" />

Is there a known solution to resolve this problem for the new iOS that will be released soon?

I am using WkWebView and

<engine name="ios" spec="~3.9.2" />
<preference name="phonegap-version" value="cli-5.2.0" />

UPDATE

I updated phonegap to version 6.3.0 and ios platform version to 4.1.1 and I have the same error.

Upvotes: 5

Views: 5735

Answers (3)

Orhan
Orhan

Reputation: 1475

This works for me:

document.addEventListener('gesturestart', (event) => { event.preventDefault(); }, false);

Answer found: https://github.com/apache/cordova-ios/issues/1054

Upvotes: 1

Nick Hingston
Nick Hingston

Reputation: 8880

Here is a solution for iOS 10+

// stop ios bounce and zoom 
document.ontouchmove = event => {
  event.preventDefault();
};

This will stop move events reaching the root element/browser

Upvotes: 0

solimanware
solimanware

Reputation: 3051

use user-scalable=no as the following code :

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

Upvotes: 7

Related Questions