WKWebView text size not matching UIWebView (or UILabel)?

I am migrating my game from UIWebView to WKWebView.


I use HTML to show the game manual and lore.


In the UIWebView version, I specified a font size in my CSS, and (as near as I can tell), UIWebView rendered text at that size.


WKWebView is deciding on its own how to render. I have added this line to each HTML file


<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">


but it doesn’t seem to give me consistent results. I actually seem to be getting a different type size depending on the amount of text (i.e. when it scrolls, it is larger!).


I looked at https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/ which seems to suggest that

ignoresViewportScaleLimits
is false by default and gives you the iOS 9 behavior (which is good because I need to support iOS 9). But I am not seeing any way to tell WKWebView to do no scaling and just show the font at the size I asked for. This is not arbitrary HTML that WK needs to guess at. It comes from a local file and is intended to match the rest of the UI.

Ah, it looks like I can add


-webkit-text-size-adjust: none;


to my CSS and WKWebView will use the size I specify. I didn’t see this documented anywhere…

Not Apple documentation, but developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust does discuss this functionality.

Add the following to your HTML -
Code Block html
<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>

Alternatively, you can add this where you're reading the html string in your swift class.
Code Block Swift
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>"
webView.loadHTMLString(headerString + yourHTMLString, baseURL: nil)


WKWebView text size not matching UIWebView (or UILabel)?
 
 
Q