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:
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
Upload Files to Dropbox from iOS App with Swift
Launching Viber App via Url Scheme on iOS
Itsappusesnonexemptencryption Export Compliance While Internal Testing
How to Change the Color of the Text in a Uipickerview Under iOS 7
Using Existing System Sounds in iOS App [Swift|
Presenting a View Controller Modally from an Action Sheet's Delegate in iOS8 - iOS11
Xmppframework - Retrieve Archived Messages from Openfire Server
"Cannot Connect to Itunes Store" In-App Purchases
How to Get Available Wifi Network Name in iOS Using Swift
Autolayout Complains About Constraints for 2 Uitextfields with No Borders
Dashed Line Border Around Uiview
How to Create a String with Format
How to Dismiss Keyboard iOS Programmatically When Pressing Return