Android webView 的一个坑，字体怎么突然变小了，android网络开发技术实战详解

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

Https://www.baidu.com

可以看到里面字体的单位是 px，跟 Android 的 dp px 有点像，是不是没作屏幕适配？

搜索发现 Web 网页的代码适配单位是 rem，有点类似于 dp。

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

于是我尝试在代码里面加了这样的代码，发现 SignatureWebView 显示个性签名又正常了。

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 ，自己拼接的 html 没有加 viewport 属性，进行适配

总结

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

1. 如果 html 是自己拼接的，并且像素是 px，不要设置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort（默认属性是 false），否则字体可能显示不正常，偏大或者偏

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

小

2. 如果 html 是自己拼接的，并且像素是 px，当我们设置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort 为 true（根据屏幕自适应），那么我们需要设置 html 的 viewport 规则，否则可能显示不正常

3. html 如果是自己拼接的，需要注意适配规则，像个人签名这种，用 webView 承载自己拼接的 html ，防止踩坑

WebView 字体常见的其他坑

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

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

出现这个问题的原因是

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

2. 某些机型 WebView 字体的大小是受手机系统字体大小控制的

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

Web js 网页解决方案

1. 一般，我们动态计算好html的font-size之后，我们就啥都不干了，就走了。

2. 但是，我们现在知道了，我们设置的大小不一定是真实的大小，所以，我们需要在设置完字体大小之后，再去重新获取一下html的font-size，看看实际的这个值，和我们设置的是不是一样。

3. 如果不一样，就要根据比例再设置一次。

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)

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

标签：网页,适配,px,开发技术,html,设置,Android,document,webView
来源： https://blog.csdn.net/m0_64603776/article/details/121947606