Android WebView 踩坑日记，字体怎么突然变小了

本文介绍: 如果 html 是自己拼接的，并且像素是 px，不要设置 WebViewSettin g 的（默认属性是 false），否则字体可能显示不正常，偏大或者偏小如果 html 是自己拼接的，并且像素是 px，当我们设置 WebViewSettin g 的，setUseWideViewPort 为 true（根据屏幕自适应），那么我们需要设置 html 的view port 规则，否则可能显示不正常。

最近，端内在做 webView 统一的时候，个性签名中的 WebView 替换为 CustomWebView 之后，发现字体突然变小。

一开始不知道是什么原因，通过二分法查找最近的提交，排查之后，发现是 SignatureWebView 的继承关系从 WebView 修改为 CustomWebView。re vert 之后就正常了。

于是，我问自己，为什么会这样呢？

我们知道，WebViewSetting 里面是可以修改 WebView 的一些默认设置的。

阅读官方文档，发现 setLoadWithOverviewMode，setUseWideViewPort 这两个方法看起来跟 WebView 缩放相关。

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

Web 网页在适配分辨率的时候，通常会设置 viewport 属性

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

我们知道，加载自定义 html，通常需要调用 loadDataWithBaseURL 方法，查看端内调用的地方，发现其他都是正常的。只有这个奇葩 SignatureWebView ，自己拼接的 html 没有加 viewport 属性，进行适配

function htmlFontSize(){
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var width = w > h ? h : w;
    width = width > 720 ? 720 : width
    var fz = ~~(width*100000/36)/10000
    document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz +"px";
    var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
    if (fz !== realfz) {
        document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
    }
}