WKWebView text size not matching UIWebView (or UILabel)?

Question

ddunham OP

Created Jan ’20

Replies 3

Boosts 0

Views 7.1k

Participants 3

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

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.

Boost

Answer 1

ddunham OP

Jan ’20

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…

0

Answer 2

jlilest002 OP

Jan ’20

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

0

Answer 3

ojshri OP

Oct ’20

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

1