一、产生原因

因为手机设置字体大小，从而导致H5页面在WebView中变形。

首先，我们做了一个H5页面，在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，一切都比较完美。

你将H5地址交给了APP工程师，做了一个WebView嵌套，然后就顺利交工了。

测试组在一堆手机中测试APP，突然，在某个手机上打开，你的页面布局乱了，字变大或者变小，总之很奇葩。

你怎么也不会想到是手机设置字体大小造成的。

因为默认浏览器中的内容是不受系统字体大小设置控制的，至少我遇到的几台手机都是这样的情况。但是APP不一样，APP是受那个玩意儿控制的！！

问题描述清楚了，出现这个问题，有以下因素

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

> 2.你的页面被加在了APP中的WebView中

> 3.这该死的手机被重设了字体大小

二、解决办法

方案一：【h5解决】

需要在设置完字体大小之后，再去重新获取一下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";

}

}

方案二：【客户端解决】

iOS

在iPhone系统设置中的“更大字体”里调整字号后，各个应用里中WebView里的文字大小似乎没有受到影响。但是对于诸如微信、UC浏览器等可以在APP里设置网页字体大小的应用，还是有限制调整字号的需求的。它们调整字体大小是通过给body设置-webkit-text-size-adjust属性实现的，因此只要限制这个属性不被修改即可：

body {

-webkit-text-size-adjust: none !important;

}

Android

如果是在自己开发的APP中，可以在客户端的WebView组件中设置字体默认的缩放比例，以避免手机系统的字体修改对页面字体及布局造成影响。

WebSettings settings = webView.getSettings();

settings.setTextZoom(100);