The font looks like smaller in WKWebView than in UIWebView

无夜之星辰 picture 无夜之星辰 · Sep 1, 2017 · Viewed 13.6k times · Source

I changed UIWebView to WKWebView,however,with the same html,the font in WKWebView looks like smaller than in UIWebView.I don't want this happen,so is there any way to avoid this change?

Answer

无夜之星辰 picture 无夜之星辰 · Sep 1, 2017

Finally I solved this problem by adding an html string:

  • For Objective-C:
NSString *headerString = @"<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>";
[self.webView loadHTMLString:[headerString stringByAppendingString:yourHTMLString] baseURL:nil];
  • For Swift:
let headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>"
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 = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>"
        webView.loadHTMLString(headerString + (html as! String), baseURL: nil)
    }

}