唠叨几句：

在移动端再开发的过程中，很容易使用到webview,它也是用来混合开发的中间桥梁，因此解决webview使用过程中出现的问题是非常有必要的；

问题现象与发现：

现象：

日前，在是使用webview加载html过程中出现了一个这样的问题：

页面显示变形；

url中有设置图片，图片展示不全呈截断式；

发现：

其他所有手机都正常，只有一部手机显示不正常(上级的手机,哎)；

后来发现该手机比同款同型号手机显示字体略大，才发现该手机系统字体大小被重置；

经过半天测试，出现此问题的必要条件有三：

html页面采用了rem单位，并且是采用js动态计算html的font-size

html页面被加在了APP中的webview中

手机被重设了字体大小

解决方案：

一.移动端解决方案

一行代码：

webView.getSettings().setTextZoom(100);

方案一虽然看起来比较简单，但是如果我们项目已经上线了，就需要重新发版App，就需要更新等一系列操作；再者如果html其他移动端也有使用，这....接下来会发生的事情就靠大家慢慢猜想了！

二、前段兼容，

话不多说直接上代码：

var docEl = document.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth || 375;

clientWidth > 750 ? clientWidth = 750 : clientWidth = clientWidth;

if (clientWidth){

const fz = docEl.style.fontSize = 20 * (clientWidth / 375);

docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';

window.remscale = clientWidth / 375;

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";

}

}

};

if (document.addEventListener){

window.addEventListener(resizeEvt, recalc, false);

document.addEventListener('DOMContentLoaded', recalc, false);

}

这段代码，是跟前端开发一起调试验证OK的

在此，感谢前端同学

嘿嘿，咱是移动端开发者，看到这个代码有些蒙蔽，前端开发者一定看得懂...

以上就是解决方式了，希望对您有所帮助...