Font Sizes in Uiwebview Does Not Match iOS Font Size

Font sizes in UIWebView does NOT match iOS font size

If you want a 1 to 1 relationship between the font size that the UILabel uses and the font size that the UIWebView uses (via CSS) you have to use px instead of pt when defining the font size in your CSS.

Checkout this example HTML / CSS:

<html>
<head>
<style type='text/css'>
body {
font-family: 'SourceSansPro-Regular';
padding: 0
}
.point {
font-size: 17pt
}
.pixel {
font-size: 17px
}
</style>
</head>
<body>
<p class="point">About (17pt)<p>
<p class="pixel">About (17px)</p>
</body>
</html>

When you add a UIWebView and a UILabel to your UIViewController and load the above HTML to the UIWebView and set the same font to the UILabel:

override func viewDidLoad() {
super.viewDidLoad()

let webView = UIWebView(frame: CGRect(x: 25, y: 50, width:325 , height: 90))
view.addSubview(webView)

let filePath = NSBundle.mainBundle().URLForResource("test", withExtension: "html")
webView.loadRequest(NSURLRequest(URL: filePath!))

let label = UILabel(frame: CGRect(x: 25, y: 150, width: 325, height: 40))
label.font = UIFont(name: "SourceSansPro-Regular", size: 17)
label.text = "About (UILabel set to 17)"
view.addSubview(label)
}

You get the following output:

Sample Image

The font looks like smaller in WKWebView than in UIWebView

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

}

How to change the font size in UIWebview

Put this code in your webViewDidFinishLoad delegate method:

-(void)webViewDidFinishLoad:(UIWebView *)webView1{

int fontSize = 20;
NSString *jsString = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", fontSize];
[webView1 stringByEvaluatingJavaScriptFromString:jsString];
[jsString release];

}

Hope it helps ;)

Update:
For developers who enabled ARC, you should ignore adding:

[jsString release];

How to change font size in the WebView (Swift 5)

The span tag you have won't really do anything, since it's opening and closing immediately -- it doesn't contain any content.

This solution works assuming your HTML string doesn't already have full <head> and <body> tags:

let header = """
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
body {
font-family: "Avenir";
font-size: 24px;
}
</style>
</head>
<body>
"""
webView.loadHTMLString(header + myHTMLString + "</body>", baseURL: nil)

The first important thing this does is set the viewport so that the page is the correct scale for the device (the primary reason your text was so small). Then, it also shows you how to set a font family and font size for the body of the HTML.

If your HTML markup already has <head> and <body> tags, you might want to do the same sorts of things (changing the viewport and body styles) by injecting javascript. You can see some info about doing this here: WKWebView equivalent for UIWebView's scalesPageToFit

Resizing text in UIWebView - Swift 3

As this is a web view, you can wrap content with "font size" attribute,

        let content = "<html><body><p><font size=30>" + webContent + "</font></p></body></html>"
webView.loadHTMLString(content, baseURL: nil)

Here change the size accordingly



Related Topics



Leave a reply



Submit