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

5
votes

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.

2
ioscordovawkwebviewpinchzoomcordova-ios

2 Answers

5
votes

use user-scalable=no as the following code :

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

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