Preventing Pinch-Zoom in Cordova on Windows 10 Mobile | Cordova

One of the most obvious ways to spot a Cordova app is a pinch-zoom inside the app. On Android and iOS you can use meta-tags and CSS to disable the pinch-zoom and over scroll. But for some reason I couldn’t get it disabled on Windows 10 mobile.

The Solution

I’ve been looking everywhere for the solution. And after a long search it turned out to be very easy. Just add the following CSS to your app:

html {
    touch-action: none;
}

There used to be a Microsoft vender specific version of this, but the vender part is dropped and it’s now according to the W3C standard.

Fix unsafe:ms-appx-web issues in Angular and Cordova on Windows 10

During a recent stream over at LiveCoding.TV I ran into some issues with displaying an image in a Cordova app I’m building. This image was stored inside my appx package, but the Content Security Policy blocked it anyways.

It turned out I needed to whitelist the ms-appx and ms-appx-web protocols.

I modified the initialization of the Angular module to whitelist these protocols for images and hrefs as you can see in the example below:

angular.module('app', ['ngRoute'], function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|ms-appx-web|ms-appx):|data:image\//);
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension|ms-appx-web|ms-appx):/);
});