Best IT Recipes

The font size in UIWebView does NOT match the iOS font size

Here is UILabel, which says "O". Install exactly 17.7 on iOS.

Below it is a UIWebView, which also says "Oh." Also given exactly 17.7 using css.

enter image description here

They do not match.

How to fix it right?

Is it weird that in Apple's own UIWebView, the base size is different ?

Html to check ...

<html><head> <style type='text/css'> body { margin: 0px; font-family: 'SourceSansPro-Light'; font-size: FONTPOINTSpt; } html { -webkit-text-size-adjust:none; } </style></head> <body leftmargin=0 topmargin=0> About </body></html>

The behavior is identical on the device or simulator.

(Please note from here I learned that this ratio is probably 72.0 / 96.0.)

+8
css ios uiwebview retina-display
Jul 05 '16 at 12:15
source share
3 answers

If you want the ratio between the font size used by UILabel and the font size used by UIWebView (via CSS) from 1 to 1, you should use px instead of pt when determining the font size in your CSS.

Checkout this HTML / CSS example:

 <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 UIWebView and UILabel to your UIViewController and load the above HTML into a UIWebView and set the same font to 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 result:

enter image description here

+10
Jul 11 '16 at 20:15
source share

I think your confusion was that CSS pt is a typographic dot (1/72 of an inch), but the Apple iOS documentation uses a “dot” (like UIFont.pointSize) as a “virtual pixel”, which corresponds to CSS px . Judging by @joern's answers, it looks like UIWebView uses 1 css px = 1 ios virtual px. (I have not tested this.) However, in my tests with WKWebView, it looks like this: CSS px is equal to one pixel of the device. So for WKWebView you want:

 let fontSize = UIScreen.main.scale * label.font.pointSize let cssStr = String(format:"font-size: %.1fpx;", fontSize)
0
Aug 18 '17 at 19:42 on
source share

Yep, its parent font size:

You should always set the font size for the body to 16 pixels (you can set it higher if you need a larger base font, the standard is 16 pixels).

Then set the font size using 16px as the base.

 body { font-size: 16px; } h1 { font-size: 24px; }

If you want the body size and h1 to be the same, just set the body font size and do not set the h1 font size (it inherits the body font size per inch of its own ... aka ... cascading).

 body { font-size: 16px; } h1 { }

What you did is set the font size of the body to a value ... then set the font size h1 to the same value, the problem is that h1 inherits the font size from the body and then gets even bigger when you assign the font size h1 .

Hope this makes sense and helps.

-2
Jul 05 '16 at 13:13
source share


More articles:


All Articles