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?
The font looks like smaller in WKWebView than in UIWebView
try injecting this line in your html <meta name=\"viewport\" content=\"initial-scale=1.0\" /> –
Placia
I am facing same issue after adopting WKWebView with Xcode 11. –
Politick
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)
}
}
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://mcmap.net/q/219283/-suppress-wkwebview-from-scaling-content-to-render-at-same-magnification-as-uiwebview-does –
Fatigued
Facing same issue, i have already added above HTML. migrated from xcode 10.3 to xcode 11 –
Politick
This does work but the HTML content first appears small and then becomes normal. It's fast but still visible. –
Wagonage
Thanks - workd for me in VS2019 for Windows With Xamarin. Just included the <Head> tag 'as is' into my Html –
Tolson
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)
Hi, How to do this when I am loading webview with URL. Font is size smaller in WkWebview compared with UiWebview using same URL. –
Readymix
@Readymix in above given example self.webView is a WKWebview object. –
Joviality
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:
Saved the day, Thanks. –
Overwrite
nit: 'head' not 'header' –
Matta
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
This is the only working solution for me. –
Frost
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)
}
though is it good that you are providing answers, but it would be better if you explain in brief your code -FROM REVIEW –
Allative
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
}
}
}
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
}
It's possible to scale the content by applying a zoom to JavaScript directly:
func scaleWebViewTextContent(_ webView: WKWebView, _ multiplier: Double) {
let jsCode =
"""
var scale = \(multiplier);
document.body.style.zoom = scale;
"""
webView.evaluateJavaScript(jsCode)
}
btw, if would face any problem with headers(h1, h2, h3 etc) can use
document.documentElement.style.fontSize="\(multiplier*100)%" instead –
Guacharo © 2022 - 2024 — McMap. All rights reserved.