NativeScript: Way to disable zoom controls for iOS WebView?

Question

I am trying to figure out a way to prevent users from zooming in and out on an iOS WebView (tns-ios 3.4.1) via pinch gestures & double tapping, essentially disabling all scaling like the html meta tag used to do before apple went to letting the user decide if he wants to zoom with iOS 10 and above. I found a solution for android here , for iOS it doesn't appear to be as trivial though.

I am pretty new to the platform, is this currently possible at all? I found that NS recently switched from UIWebView to WKWebView, can we use the allowsMagnification property somehow from NativeScript (*with angular)?

Answer 1

I was able to from NS 3.3 - 4.1

Get your #webview reference and then setup these properties for ios and android to fix the view zooming.

let webView: WebView = this.webView.nativeElement;
webView.on(WebView.loadStartedEvent, function (args: LoadEventData) {               
    if (webView.android) {
        webView.android.getSettings().setBuiltInZoomControls(false);
        webView.android.getSettings().setDisplayZoomControls(false);
    } else {
        webView.ios.scrollView.minimumZoomScale = 1.0;
        webView.ios.scrollView.maximumZoomScale = 1.0;
        webView.ios.scalesPageToFit = false;
        webView.ios.scrollView.bounces = false;
    }
});

Answer 2

No, you will not be able to use allowsMagnification . You will have extend to your own version of WebView component in order to update meta configuration to stop zooming.

Update:

The default viewport being injected from {N} core module (v5.x) has to be modified in order to disable zoom, here is how it done.

import { WebView } from 'tns-core-modules/ui/web-view';

declare var WKUserScript, WKUserScriptInjectionTime, WKUserContentController, WKWebViewConfiguration, WKWebView, CGRectZero;

(<any>WebView.prototype).createNativeView = function () {
    const jScript = `var meta = document.createElement('meta'); 
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'initial-scale=1.0 maximum-scale=1.0');
    document.getElementsByTagName('head')[0].appendChild(meta);`;
    const wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
    const wkUController = WKUserContentController.new();
    wkUController.addUserScript(wkUScript);
    const configuration = WKWebViewConfiguration.new();
    configuration.userContentController = wkUController;
    configuration.preferences.setValueForKey(
        true,
        "allowFileAccessFromFileURLs"
    );
    return new WKWebView({
        frame: CGRectZero,
        configuration: configuration
    });
};

Playground Sample