rem,dpi设置

#rem 设置

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 37.5 * (clientWidth / 375) + 'px';

      // 安卓微信中字体调大后适配
      if(!doc.body) return;
      var d = doc.createElement('div');
      d.style.cssText="width:10rem;height:0;overflow: hidden;position:absolute;z-index:-1;visibility: hidden;";
      doc.body.appendChild(d);
      var dw =  d.offsetWidth;// 1rem的实际展示px值
      doc.body.removeChild(d);
      var fz = 10 * ( 37.5 * (clientWidth / 375)); //正常计算出来的rem基准值 , 可自行修改为rem计算好的值
      var realRem = fz;
      if(dw !== fz){//不相等 则被缩放了
        realRem = Math.pow(fz , 2) / dw / 10 ;
        docEl.style.fontSize = realRem + 'px';
      }
    };
  recalc()
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

TIP

防止 ios 中微信字体变大后布局错乱

 

body{
  -webkit-text-size-adjust: 100% !important;
}

#dpi 设置 

(function () {
  var width = parseInt(window.screen.width)
  var designWidth = 450
  var scale = width / designWidth
  var userAgent = navigator.userAgent.toLowerCase()
  var metaHead = '<meta name="viewport" content="width=' + designWidth + ','
  if (/android (\d+\.\d+)/.test(userAgent)) {
    if (parseFloat(RegExp.$1) > 2.3) metaHead += 'minimum-scale=' + scale + ',maximum-scale=' + scale + ','
  } else {
    metaHead += 'user-scalable=no,';
  }
  metaHead += 'target-densitydpi=device-dpi">';
  document.write(metaHead);
})()

TIP

安卓 2.3 的检测感觉已经不需要了，所以可以直接将 meta 标签写在页面里