Question

我将UIWebView更改为WKWebView，但是，使用相同的html，WKWebView中的字体看起来比UIWebView中的字体小。我不希望这种情况发生，所以有什么方法可以避免这种变化吗？

Answer 1

最后，我通过添加一个html字符串解决了这个问题：

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:_htmlString] baseURL:nil];

Answer 2

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)

Answer 3

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

只需调用此方法，魔术就会发生。 ;）

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

输出：

Answer 4

我们可以通过WKNavigationDelegate didFinish导航方法中的javaScrip insertAdjacentHTML函数将标头插入html

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

}

Answer 5

从iOS 14开始，您可以使用pageZoom属性实现此目的。例如

webView.pageZoom = 2.0;

将使页面内容翻倍。

以下是文档链接：

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

Answer 6

此代码对我有用：

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

Answer 7

我通过以简洁的方式注入上面提供的 JavaScript 代码解决了这个问题。这是我实例化 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
}

WKWebView中的字体看起来比UIWebView中的字体小

7 个答案: