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

Posted 2022-06-22 zcpblog

出现这个问题，有以下因素

你的页面采用了rem单位，并且是采用js动态计算html的font-size
你的页面被加在了APP中的webview中
这该死的手机被重设了字体大小
解决方法
一般，我们动态计算好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配置webview.getSettings().setTextZoom(100)就可以禁止缩放，按照百分百显示。