使用rem构建web h5应用 处理chart 和 app webview 在安卓下错乱问题

前言

最早基于手淘做过一次H5 rem适配， 当时基于Hybrid APP。后面使用antd-mobile后，使用 阿里的高清方案。css 新增calc 函数 可以处理边框 配合 flex布局。但是字体大小要额外处理，并且部分安卓机型不支持calc，以及1px问题。so,最后我还是决定采用其他的rem。这也是踩坑的开始

内嵌rn webview。

我们为三方提供一个H5授权页，用于oAuth2 认证流程。在上述js计算，在ios下都正常。但是在安卓出现不识别问题。出现问题主要原因如下。

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是一样的效果。

但是在有些 Android 手机上，浏览器或 webview 的默