htmliosuiwebviewwkwebview

The font looks like smaller in WKWebView than in UIWebView


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?


Solution

  • Finally I solved this problem by adding an html string:

    • For Objective-C:
    NSString *headString = @"<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:[headString stringByAppendingString:yourHTMLString] baseURL:nil];
    
    • For Swift:
    let headString = "<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(headString + 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 headString = "<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(headString + (html as! String), baseURL: nil)
        }
        
    }