我将
UIWebView
更改为WKWebView
,但是,使用相同的html,WKWebView
中的字体看起来比UIWebView
中的字体小。我不希望这种情况发生,那么有什么办法可以避免这种变化呢?
最后我通过添加一个html字符串解决了这个问题:
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];
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)
更重要的是,如果你想加载 url 而不是 html 你可以尝试:
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)
}
}
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)
在 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)
从 iOS 14 开始,您可以使用 pageZoom 属性来实现此目的。例如
webView.pageZoom = 2.0;
将使页面内容放大两倍。
这是文档链接:
https://developer.apple.com/documentation/webkit/wkwebview/3516411-pagezoom
我们可以通过 WKNavigationDelegate didFinish 导航方法中的 javaScrip insertAdjacentHTML 函数将 headers 插入到 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
}
}
}
这段代码对我有用:
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)
}
我通过巧妙地注入上面提供的 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
}