华为手机自带浏览器 rem 不准确导致页面放大

问题：用rem写样式的时候，在所有设备上正常，但是在华为自带浏览器上显示是放大的。rem的js文件如下

let fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
let clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 1 * clientWidth / 768 + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
}
fun(document, window)

window.onresize=function(){
fun(document, window)
}

原因：按照上面的代码，相当于把html的font-size设置为1px，在华为自带浏览器中，font-size过小不能识别，所以导致rem样式失效。

解决：先改这个js文件，1 * clientWidth / 768 + 'px'===>100 * clientWidth / 768 + 'px'，然后将写好的css的数值全部除以100：可以用正则，或者将原来的rem改为px，再用在线工具转倍数http://www.ofmonkey.com/front/rem，或者用编辑器里面的插件（如cssrem）自动将px值转化为rem的值。

正则方式：有些数值是紧跟在冒号前面的，要先将格式标准化，在中间加上空格，如果样式的数值有负数的也要注意处理符号，然后严格按照下面的顺序处理。

WechatIMG101.png

附加：设置的数值最好不要太小或太大，跟一般浏览器默认的字体大小差不多最好。因为bootstrap之类的库有时候会用到rem这个单位，它是参照的默认的字体大小。跟我们的设置差别太大的话需要去覆盖库里面的样式。