SoFunction
Updated on 2025-04-06

The reasons and solutions for the sudden decrease of Android webView fonts

background

Recently, when the webView is unified internally, after replacing the WebView in the personal signature with CustomWebView, I found that the font suddenly became smaller.

At first I didn't know why, so I searched for the most recent submission through dichotomy. After troubleshooting, I found that the inheritance relationship of SignatureWebView was changed from WebView to CustomWebView. It's normal after revert.

So, I asked myself, why is this happening?

Cause analysis

We know that some default settings of WebViewSetting can be modified in WebView.

After reading the official documentation, I found that the two methods setLoadWithOverviewMode and setUseWideViewPort seem to be related to WebView scaling.

So I tried to change setLoadWithOverviewMode to false, which was amazing and it was normal.

setLoadWithOverviewMode

The purpose of this method is simply to adapt to the screen width.

Sets whether the WebView loads pages in overview mode, that is, zooms out the content to fit on screen by width. This setting is taken into account when the content width is greater than the width of the WebView control, for example, when getUseWideViewPort() is enabled. The default is false.

/reference/a…

After this problem was solved, I had this question in my mind, why there is no problem in other places, only the personal signature, and the WebView here is problematic.

With this question, I browsed the code again and found that the web page loaded by the Webview in the personalized signature is an html spliced ​​by myself. After debugging, I found that the web page code is probably like this

<span style="word-wrap:break-word;font-family:system-ui;font-size:16px;color:#888888;">Https://</span>

You can see that the font unit inside is px, which is a bit similar to Android's dp px. Is it not suitable for screen adaptation?

Search and found that the code adaptation unit of web pages is rem, which is somewhat similar to dp.

When adapting to resolutions on a web page, the viewport property is usually set.

So I tried adding such code to the code and found that the SignatureWebView displays personal signatures again.

parsedHtml += "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover\">";

The rules for adapting web fonts are not shown here. If you are interested, you can search for it yourself.

Check other places within the terminal

We know that when loading custom html, we usually need to call the loadDataWithBaseURL method, check the calls on the end, and find that everything else is normal. Only this weird SignatureWebView, the html you spliced ​​by yourself does not add the viewport attribute to adapt.

Summarize

  1. If the html is spliced ​​by itself and the pixels are px, do not set the setLoadWithOverviewMode of WebViewSetting and setUseWideViewPort (the default attribute is false), otherwise the font may be displayed abnormally, larger or smaller
  2. If the html is spliced ​​by itself and the pixels are px, when we setLoadWithOverviewMode of WebViewSetting and setUseWideViewPort is true (adaptive according to the screen), then we need to set the viewport rule of html, otherwise it may not display normally
  3. If the html is spliced ​​by yourself, you need to pay attention to the adaptation rules. For example, personal signatures, use webView to host the html you spliced ​​by yourself to prevent traps

Other common pitfalls in WebView fonts

Setting the font size of the phone causes the h5 page to deform in the webview

The reason for this problem is

  1. The content in the default browser is not controlled by the system's font size settings, at least this is the case for several phones I encountered.
  2. The size of WebView fonts of some models is controlled by the font size of the mobile phone system.

There are usually two solutions to this.

Web js web page solution

  1. Generally, after we dynamically calculate the font-size of the html, we do nothing and leave.
  2. However, now we know that the size we set may not be the real size, so we need to re-get the font-size of the html after setting the font size to see if the actual value is the same as what we set.
  3. If it is different, it must be set again according to the proportion.
function htmlFontSize(){
 var h = (,  || 0);
 var w = (,  || 0);
 var width = w > h ? h : w;
 width = width > 720 ? 720 : width
 var fz = ~~(width*100000/36)/10000
 ("html")[0]. = 'font-size: ' + fz +"px";
 var realfz = ~~(+(("html")[0]).('px','')*10000)/10000
 if (fz !== realfz) {
  ("html")[0]. = 'font-size: ' + fz * (fz / realfz) +"px";
 }
}

Client WebView prohibits scaling

Android WebView can prohibit web font scaling through WebSettings, and can be solved by settingTextZoom method.

().setTextZoom(100)

summary

This article mainly records a bug resolution process. It has low technical content, but it has certain reference value. Especially the solution to bugs.

  1. There was a sudden problem online and there was no problem. Try the dichotomy method and gradually narrow the scope.
  2. Sometimes, when we find a solution, we may not necessarily know what the reason is. At this time, we can ask ourselves more about what the reason is? During the investigation, we will gradually develop our own set of problem-solving ideas, which sounds very false, but it does exist.
  3. After knowing the reason, we can continue to further investigate whether there are such problems in other modules in the project.
  4. How to avoid problems like this in the future? Write a wiki or blog to record it

The above is the detailed content of the reasons and solutions for the sudden decrease of Android webView fonts. For more information about the sudden decrease of Android webView fonts, please follow my other related articles!