解决因为手机设置字体大小导致h5页面在webview中变形的BUG
首先,我们做了一个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(d