移动端rem设置(部分安卓机型不兼容)

Posted 手指键盘摩擦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端rem设置(部分安卓机型不兼容)相关的知识,希望对你有一定的参考价值。

(function(win) {
      var doc = win.document;
      var docEl = doc.documentElement;
      var tid;
      function refreshRem() {
          var width = docEl.getBoundingClientRect().width;
          if (width > 640) { // 最大宽度
              width = 640;
          }
          var rem = width / 10; // 将屏幕宽度分成10份, 1份为1rem
          docEl.style.fontSize = rem + ‘px‘;
      }
      win.addEventListener(‘resize‘, function() {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
      }, false);
      win.addEventListener(‘pageshow‘, function(e) {
          if (e.persisted) {
              clearTimeout(tid);
              tid = setTimeout(refreshRem, 300);
          }
      }, false);
      refreshRem();
      console.log(docEl.style.fontSize)
})(window);

 

以上是关于移动端rem设置(部分安卓机型不兼容)的主要内容,如果未能解决你的问题,请参考以下文章

移动端根据rem适配时,pc端调试器和手机显示效果不一致问题

移动 Web 适配利器:rem

移动端文字适配

rem在手机移动端app中的兼容适配问题

rem在手机移动端app中的兼容适配问题

处理移动端自适应布局的方法- calc()与vw