红米手机H5布局压扁

移动端rem布局样式错乱问题
这段时间在开发app内的h5页面，发现一个奇怪的问题，测试机中有红米手机 ，oppo手机，在app打开h5之后，整个页面被压扁变形了，一开始以为是手机分辨率的问题，但是在同样的手机的其它app内和浏览器内打开页面，都是完全正常显示。

后来查了一下，发现原来是手机字体大小设置的问题，当把字体调大一号时，在app内就正常显示了。现在很多安卓手机的系统都是可以自己去设置系统字体的大小，这就导致用rem布局时，根字体的大小计算错误，样式出现错乱。ios上不会出现这个问题。

解决办法：
Android手机可以给webview配置webview.getSettings().setTextZoom(100)禁止缩放，按照百分百显示。

注意：rem布局在安卓手机中还有一个问题需要特别注意，很多按钮样式我们希望文字可以垂直居中，一般都是用line-height或者padding去处理，但是我们会发现在很多安卓手机里无法垂直居中，这里其实是我们设置的rem单位为奇数造成的。我们在设置font-size，line-height，padding等属性的值时，尽量都是偶数，这样就不会出现这个问题了！