4

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

mxe
  • 151
  • 8

2 Answers2

5

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

Manoj
  • 21,753
  • 3
  • 20
  • 41
  • Someone mentions having done this in a Nativescript Issues thread about disabling zooming: https://github.com/NativeScript/NativeScript/issues/5443#issuecomment-374497857 Not sure it this works, but is this the kind of thing you're talking about? – Batmanbury Mar 29 '19 at 17:13
  • Manoj, can your solution be done in plain JS? I'm not exactly sure what's going on there, but your code looks like the best candidate for this problem. – Batmanbury May 02 '19 at 00:55
  • Just remove the typings from code, then it's all just JS. – Manoj May 02 '19 at 05:32
  • There is a working Playground sample above, I'm not sure if have checked it. – Manoj May 03 '19 at 19:52
  • No idea where you found this solution but it works! – Andy J. Oct 18 '19 at 13:21
4

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;
    }
});
Shaunti Fondrisi
  • 1,081
  • 10
  • 13