NativeScript：如何禁用iOS WebView的縮放控件？

Question

我正在嘗試找出一種方法來防止用戶通過捏合手勢和雙擊來在iOS WebView（tns-ios 3.4.1）上進行放大和縮小，本質上是禁用所有縮放功能，例如在蘋果進入蘋果之前使用的html meta標簽讓用戶決定是否要使用iOS 10及更高版本進行縮放。 我在這里找到了適用於android的解決方案，對於iOS，它似乎並不那么瑣碎。

我對這個平台還很陌生，目前可以做到嗎？ 我發現NS最近從UIWebView切換到WKWebView，我們可以通過NativeScript（* with angular）來使用allowMagnification屬性嗎？

Answer 1

我能夠從NS 3.3-4.1

獲取您的#webview參考，然后為ios和android設置這些屬性以修復視圖縮放。

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

不，您將無法使用allowsMagnification 。 您將擴展到自己的WebView組件版本，以更新元配置以停止縮放。

更新：

為了禁用縮放，必須修改從{N}核心模塊（v5.x）注入的默認視口，這是完成的操作。

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
    });
};

游樂場樣本