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

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

Web 网页字体的适配规则，这里就不班门弄斧了,有兴趣的可以自行搜索。

[](()端内其他地方排查

我们知道，加载自定义 html，通常需要调用 loadDataWithBaseURL 方法，查看端内调用的地方，发现其他都是正常的。只有这个奇葩 SignatureWebView ，自 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 己拼接的 html 没有加 viewport 属性，进行适配

[](()总结

================================================================

如果 html 是自己拼接的，并且像素是 px，不要设置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort（默认属性是 false），否则字体可能显示不正常，偏大或者偏小
如果 html 是自己拼接的，并且像素是 px，当我们设置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort 为 true（根据屏幕自适应），那么我们需要设置 html 的 viewport 规则，否则可能显示不正常
html 如果是自己拼接的，需要注意适配规则，像个人签名这种，用 webView 承载自己拼接的 html ，防止踩坑

[](()WebView 字体常见的其他坑

==============================================================================

[](()手机设置字体大小导致h5页面在webview中变形

出现这个问题的原因是

默认浏览器中的内容是不受系统字体大小设置控制的，至少我遇到的几台手机都是这样的情况。
某些机型 WebView 字体的大小是受手机系统字体大小控制的

问题解决方案来自这篇文章：[blog.csdn.net/FungLeo/art…](()

这个通常有两种解决方案。

[](()Web js 网页解决方案

一般，我们动态计算好html的font-size之后，我们就啥都不干了，就走了。
但是，我们现在知道了，我们设置的大小不一定是真实的大小，所以，我们需要在设置完字体大小之后，再去重新获取一下html的font-size，看看实际的这个值，和我们设置的是不是一样。
如果不一样，就要根据比例再设置一次。

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”;

}

[](()客户端 WebView 禁止缩放

Android WebView 是可以通过 WebSettings 禁止网页字体缩放的，可以通过 setTextZoom 方法解决

webview.getSettings().setTextZoom(100)

可以禁止缩放，按照百分百显示。

[](()小结

================================================================

这篇文章主要是记录 bug 的一个解决过程，技术含量不高，但是有一定的参考价值。尤其是 bug 的解决思路。

线上突然出现问题，一直找不出问题，尝试一下二分法，逐步缩小范围。
有时候，我们找到解决方案，却不一定知道原因是什么，这时候，可以多问一下自己，背后的原因是什么？在排查的过程中，我们会逐渐培养自己的一套问题解决思路，听起来很虚，但是确实存在的。
知道原因之后，我们可以继续再进一步排查一下，项目中其他模块是不是也存在这样的问题。
以后要怎么规避之类问题？写个 wiki 或者博客记录一下

[](()推荐阅读

这几篇文章从 0 到 1，讲解 DAG 有向无环图是怎么实现的，以及在 Android 启动优化的应用。

推荐理由：启动优化动不动就聊拓扑结构，这篇文章从数据结构到算法到设计都给大家说清楚了，开源项目也有非常强的借鉴意义。

[Android 启动优化（一） - 有向无环图](()

[Android 启动优化（二） - 拓扑排序的原理以及解题思路](()

[Android 启动优化（三）- AnchorTask 开源了](()

[Android 启动优化（四）- AnchorTask 是怎么实现的](()

[Android 启动优化（五）- AnchorTask 1.0.0 版本正式发布了](()