Prevent Android Webview from changing font-size (Computed Style)

Question

I have a webpage which is displayed by Android application via Webview component.

It decides to change the font-size so the text of 16px has font-size=14px (I can see it when I inspect the element with weinre. It has 16px but in computed style it has 14px).

I wouldn't like the Webview to decide what is better at all. So how can I fix the problem?

Remark: In this specific case the change causes the text not to be vertical aligned, because after the change the line-height doesn't adjust the font-size. It is just one of the cases and I would like to stop Webview from changing the css values.

Answer 1

This issue seems to be due to the WebView respecting the system font size setting (which can be altered at: Settings > Display > Font size).

Several bug reports have been submitted in various places (for example)

In order to reproduce the problem you have to scale down the system font size to small or minimum.

...

Okay, I can repro if I change Settings > Display > Font size. It doesn't repro in Chrome, but then Chrome doesn't seem to respect "Font size" in the first place. I'm pretty busy right now, so it may be a while before I can investigate further.

Try setting your system font size to "Small" or "Medium" and test your app.