改变手机字体大小导致APP webview 中H5页面布局错误的问题

今天测试反馈 APP 中 的 H5 在一台小米8上显示有问题，布局错误 超出屏幕。

首先发现怪异的现象是，所有css等资源都已正常加载，但是在手机默认浏览器、qq、uc等都是正常的，在APP中就是布局错误，初步怀疑是APP的问题，但是APP那边反馈没有问题~~~

刚好同事有一台小米8，但在同事的机器上H5显示正常。在反复对比两台机器各项参数（APP版本、手机系统版本、安卓版本、webview版本等等）都是一致没有区别后，心态确实有点崩

最后两台手机对比着审查元素发现H5中 html的字号大小不一致，进而发现其中一台小米8的手机字体大小不是默认大小。将字体恢复为系统默认大小后 一切正常~~~

网上查阅资料发现很多人遇到了这个问题，在刚开始没有想到是字体大小的原因 是因为在手机默认浏览器上是没问题的，But... APP里的webview 就受到影响，这就是坑的 地方。

总结出现此问题会是有以下因素：

1.页面采用了rem单位，并且是采用js动态计算html的font-size
2.页面在APP的webview中
3.手机被重设了字体大小

解决方法：

安卓客户端通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放，按照百分百显示。