rem布局在webview中页面错乱

上一篇我分享了 rem布局加载闪烁问题，这个问题也是在rem布局经常遇到而且还比较好解决的问题。

但是！注意，这里但是哈！（一般但是都要搞事情）

你有没有遇到过如下这种问题（页面错乱）：查看代码，html的font-size设置正常，在浏览器和绝大部分手机上也正常，但是在某些手机上页面元素为什么就大了或小了呢？是rem布局不准了吗？

非也，其实是系统字体大小的问题，这类问题常见于安卓设备上，而且是内嵌在APP里面的H5页面。

问题因素

出现这个问题有几个因素：
1.用rem布局的H5页面
2.页面内嵌在APP的webview中
3.手机 设置 修改了默认字体大小，如下图我的小米手机示例。

满足以上三个因素，在很多手机上都会出现这个问题。

解决方案

方案一（获取系统字体大小）

一般设计稿750px，为了便于计算，我们设1rem = 100px;也就是1rem = 1 * htmlFontSize （htmlFontSize 为 html 元素的字体大小），当然在iPhone6 375px宽的屏幕上，htmlFontSize 为50px。

其实，htmlFontSize 除了以px为单位外，还可以用百分比作为单位，比如你可以设置htmlFontSize的大小为312.5%，页面的布局效果与设置htmlFontSize 大小为50px是一样的效果。

那么问题来了，设置为百分比单位的时候，这个百分比值是怎么计算出来的呢？

浏览器默认字体大小为 16px，当我们使用百分比作为根节点 html 的字体大小时，rem 的计算方式就会改为

defaultFontSize = 16px
1rem = 1 * htmlFontSize * defaultFontSize

比如375像素宽设备上：

1rem = 1 * 312.5% *16 = 50 px

这与我们的实际情况相符，但是在有些 Android 手机上，浏览器或 webview 的默认字体是随着系统设置的字体改变的。这样就会导致默认字体大于或小于 16px。从这个思路出发，我们只需要找到系统设置的字体大小就可以正确的计算htmlFontSize的值了。

于是写一个函数来获取defaultFontSize的值：

//获取系统默认字体大小
//designWidth 设计稿的宽度
//rem2px 设计稿宽度下，1rem的宽度
function adapt(designWidth, rem2px){