Suppress Wkwebview from Scaling Content to Render at Same Magnification as Uiwebview Does

Suppress WKWebView from scaling content to render at same magnification as UIWebView does

I had the same problem. I just had to put

<meta name="viewport" content="initial-scale=1.0" />

into my header block and that solved it for me. Looks like WKWebView behaves more like Mobile Safari than a UIWebView does, so you need to set the viewport if you want to control scaling or general sizing.

Disable image selection in WKWebView

You can do that in two ways (tested on iOS 15.5):

1: CSS

img {
    user-drag: none;    
    -webkit-user-drag: none;    
}

2: HTML

<img src = "image.png" alt = "image" draggable = "false" />

Disable Font Scaling on WKWebView

Try to add in your css :

body {
  -webkit-text-size-adjust: none;
}

Is there a way to scale up a WKWebView?

I have solved the problem with this:
https://stackoverflow.com/questions...tent-to-render-at-same-magnification-as-uiweb

WKWebView suppressesIncrementalRendering

This has been moved to the configuration of WKWebView:

myConfiguration.suppressesIncrementalRendering = YES;

The font looks like smaller in WKWebView than in UIWebView

Finally I solved this problem by adding an html string:

For Objective-C:

NSString *headerString = @"<head><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></head>";
[self.webView loadHTMLString:[headerString stringByAppendingString:yourHTMLString] baseURL:nil];

For Swift:

let headerString = "<head><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></head>"
webView.loadHTMLString(headerString + yourHTMLString, baseURL: nil)

What's more,if you want to load url rather than html you can try:

private var isInjected: Bool = false
webView.navigationDelegate = self
// MARK: - WKNavigationDelegate
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    if isInjected == true {
        return
    }
    self.isInjected = true
    // get HTML text
    let js = "document.body.outerHTML"
    webView.evaluateJavaScript(js) { (html, error) in
        let headerString = "<head><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></head>"
        webView.loadHTMLString(headerString + (html as! String), baseURL: nil)
    }
    
}

Suppress Wkwebview from Scaling Content to Render at Same Magnification as Uiwebview Does