Disable Zoom in Wkwebview

Disable zoom in WKWebView?

You will have to add maximum scale in script.

The following code should help you:

let source: String = "var meta = document.createElement('meta');" +
    "meta.name = 'viewport';" +
    "meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';" +
    "var head = document.getElementsByTagName('head')[0];" +
    "head.appendChild(meta);"

let script: WKUserScript = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let userContentController: WKUserContentController = WKUserContentController()
let conf = WKWebViewConfiguration()
conf.userContentController = userContentController
userContentController.addUserScript(script)
let webView = WKWebView(frame: CGRect.zero, configuration: conf)

Disable WKWebView zooming

Please try this to disabled zooming for pinch gesture.

func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
     scrollView.pinchGestureRecognizer?.isEnabled = false
}

Disable magnification gesture in WKWebView

You can prevent your users from zooming by setting the delegate of your WKWebKit's UIScrollView and implementing viewForZooming(in:) as in the following:

class MyClass {
    let webView = WKWebView()

    init() {
        super.init()
        webView.scrollView.delegate = self
    }

    deinit() {
        // Without this, it'll crash when your MyClass instance is deinit'd
        webView.scrollView.delegate = nil
    }
}

extension MyClass: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return nil
    }
}

Disable zoom in WebView or react-native-wkwebview in React Native

In the head of the document rendered in the webview stick in this meta:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

Example:

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    </head>
    <body>

    </body>
</html>

You can inject this into your webview.

const SCRIPT = `
const meta = document.createElement('meta');
meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
meta.setAttribute('name', 'viewport');
document.head.appendChild(meta);
`;

<WebView injectedJavaScript={SCRIPT} />

Disabling zooming on webview

You can remove the pinchGestureRecognizer from scrollView in delegate method didFinish navigation by conforming your ViewController to WKNavigationDelegate as below,

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // TODO: Initialize webView before setting the delegate
        webView.navigationDelegate = self
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        if let pinchGesture = webView.scrollView.pinchGestureRecognizer {
            webView.scrollView.removeGestureRecognizer(pinchGesture)
        }
    }
}

Disable Zoom in Wkwebview