Android WebView 踩坑日记，字体怎么突然变小了？，附超全教程文档

05-14 阅读 0评论

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

WebView 字体常见的其他坑

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

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

出现这个问题的原因是

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

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

一般，我们动态计算好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”;

}

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

webview.getSettings().setTextZoom(100)

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

小结

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

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

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