其他分享
首页 > 其他分享> > Android webView 的一个坑,字体怎么突然变小了,android网络开发技术实战详解

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 的 setLoadWithOverviewModesetUseWideViewPort(默认属性是 false),否则字体可能显示不正常,偏大或者偏

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

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

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

  2. 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