安卓4.0下rem显示不正常的问题

Posted 2020-08-20 无梦灬

在项目中使用了rem为单位，结果在Oppo和4.0下某些浏览器rem工作不正常，font-size计算出来的px总是大于预期的值，因此加了个Hack

var docEl = doc.documentElement,
    resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
    recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 320) + ‘px‘;
       correctPx()
    };
     // 校正
    function correctPx(){
      var docEl = document.documentElement;
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      var div = document.createElement(‘div‘);
      div.style.width = ‘1.4rem‘;
      div.style.height = ‘0‘;
      document.body.appendChild(div);
      var ideal = 140 * clientWidth / 320;
      var rmd = (div.clientWidth / ideal);
      if(rmd >1.2)
        docEl.style.fontSize = 100 * (clientWidth / 320)/ rmd + ‘px‘;
      document.body.removeChild(div);
    }
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded‘, recalc, false);