Android webView字体突然变小的原因及解决

时间:2021-05-21

背景

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

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

于是,我问自己,为什么会这样呢?

原因分析

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

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

于是尝试把 setLoadWithOverviewMode 改为 false,很神奇,竟然正常了。

setLoadWithOverviewMode

这个方法的作用,简单来说,就是是否根据屏幕宽度自适应

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.

developer.android.com/reference/a…

这个问题解决之后,我心中又有这样的疑问,为什么别的地方没有问题,只有个性签名这里的 WebView 有问题。

带着这个疑问,我再次去浏览代码,发现个性签名里面 Webview 加载的网页,是自己拼接的 html。debug 之后,发现网页代码大概是这样的

<span style="word-wrap:break-word;font-family:system-ui;font-size:16px;color:#888888;">Https://putedStyle(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 或者博客记录一下
  • 以上就是Android webView字体突然变小的原因及解决的详细内容,更多关于Android webView字体突然变小的资料请关注其它相关文章!

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章