ui 兼容问题?

Question

图:
华为:

其他手机:

问: 华为手机上 app 嵌套 页面设置的所有 rem 高度无效, 求解谢谢~
信息:
手机型号: HUAWEI G750-T01
Android 版本: 4.2.2
meta 标签:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">(针对ie可有可无)
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

rem 设置代码:

(function(win) {
  var doc = win.document,
    html = doc.documentElement,
    baseWidth = 750,
    grids = baseWidth / 100,
    resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = html.clientWidth || 375
      // if( clientWidth > 750 ){ clientWidth = 750 }
      html.style.fontSize = clientWidth / grids + 'px'
    }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', function() {
    setTimeout(recalc)
  }, false)
})(window)

Answer 1

华为某些手机的rem值有问题，1rem并不等于html的font-size。可以通过输出document.querySelector('html').style.fontSize和getComputedStyle(html).fontSize 的值来对比下，最后在计算出一个html的font-size.