The font looks like smaller in WKWebView than in UIWebView

Question

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?

I am facing same issue after adopting WKWebView with Xcode 11. — the1pawan, Mar 02 '20 at 12:54

score 201 · Accepted Answer · edited Jan 20 '21 at 13:23

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

Thanks this was helpful! This was default behavior for UIWebView. Just note, if you like to let user control the zoom in/out like a web browser: https://stackoverflow.com/a/26720053/2697217 — green0range, Jan 23 '20 at 22:53
Facing same issue, i have already added above HTML. migrated from xcode 10.3 to xcode 11 — the1pawan, Mar 03 '20 at 06:21
This does work but the HTML content first appears small and then becomes normal. It's fast but still visible. — PhoneyDeveloper, May 28 '20 at 17:49
Thanks - workd for me in VS2019 for Windows With Xamarin. Just included the tag 'as is' into my Html — AntDC, Feb 22 '21 at 11:39

score 27 · Answer 2 · edited Jan 18 '19 at 09:18

27

let description = "<p> HTML content <p>"
var headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>"
headerString.append(description)              
self.webView.loadHTMLString("\(headerString)", baseURL: nil)

edited Jan 18 '19 at 09:18

Duck

34,902
47
248
470

answered Aug 31 '18 at 09:47

ishwar lal janwa

524
5
8

Hi, How to do this when I am loading webview with URL. Font is size smaller in WkWebview compared with UiWebview using same URL. – Saravanan Feb 13 '20 at 06:00
@Saravanan in above given example self.webView is a WKWebview object. – ishwar lal janwa Feb 15 '20 at 05:39

score 23 · Answer 3 · answered Nov 18 '19 at 11:06

Simple way to do this in Swift

extension WKWebView {

    /// load HTML String same font like the UIWebview
    ///
    //// - Parameters:
    ///   - content: HTML content which we need to load in the webview.
    ///   - baseURL: Content base url. It is optional.
    func loadHTMLStringWithMagic(content:String,baseURL:URL?){
        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>"
        loadHTMLString(headerString + content, baseURL: baseURL)
    }
}

Just simply call this method and magic happen. ;)

webView.loadHTMLStringWithMagic(content: "<p> HTML content <p>", baseURL: nil)

OUTPUT:

nit: 'head' not 'header' – walkingbrad Apr 04 '23 at 21:08 — walkingbrad, Apr 04 '23 at 21:08

score 2 · Answer 4 · answered Nov 19 '20 at 14:34

2

From iOS 14 onward you can achieve this with pageZoom property. For example

webView.pageZoom = 2.0;

will make page content twice as large.

Here's the link for documentation:

https://developer.apple.com/documentation/webkit/wkwebview/3516411-pagezoom

answered Nov 19 '20 at 14:34

Berat Cevik

1,818
3
22
28

score 0 · Answer 5 · answered Oct 07 '20 at 18:48

We can insert Headers into html throght javaScrip insertAdjacentHTML function in WKNavigationDelegate didFinish navigation method

extension HelpScreenViewController: WKNavigationDelegate {
// MARK: - WKNavigationDelegate
public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    guard !isInjected else  {
        return
    }
    self.isInjected = true
    let js = """
             document.body.insertAdjacentHTML('beforebegin',"<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.evaluateJavaScript(js) { (html, error) in
    }
    
}

}

score 0 · Answer 6 · answered Nov 30 '20 at 16:03

0

This code work for me:

func fill(_ model:NewsModel){
    let description = "<p>\(model.details) <p>"
    var headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>"
    headerString.append(description)
    self.detailsTestWebView.loadHTMLString("\(headerString)", baseURL: nil)
}

answered Nov 30 '20 at 16:03

Shahriar Hossain

119
2
13

though is it good that you are providing answers, but it would be better if you explain in brief your code -FROM REVIEW – bhucho Nov 30 '20 at 17:24

score 0 · Answer 7 · answered Apr 19 '21 at 06:37

I fixed this by injecting the JavaScript code provided above in a neat way. Here is the way I instantiate WKWebView.

private func makeWebView() -> WKWebView {
    let config = WKWebViewConfiguration()
    let ctr = WKUserContentController()
    config.userContentController = ctr
    // JavaScript to inject
    let src = """
    document.body.insertAdjacentHTML('beforebegin',"<header><meta
    name='viewport' content='width=device-width, initial-scale=1.0,
    maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
    </header>");
    """
    let script = WKUserScript(source: src,
                              injectionTime: .atDocumentStart,
                              forMainFrameOnly: false)
    ctr.addUserScript(script)
    
    let webView = WKWebView(frame: .zero, configuration: config)
    webView.navigationDelegate = self
    webView.uiDelegate = self

    return webView
}

The font looks like smaller in WKWebView than in UIWebView

7 Answers7

Linked