H5适配方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012615439/article/details/88057060

(function(doc, win) {
  // 分辨率Resolution适配
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);

  // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
  (function() {
    return;
    var dpr = scale = 1;
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下，仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;

    //
    var metaEl = "";
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  })();

})(document, window);

!(function(){
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize = 100 * windowWidth / 750 + 'px';
    // rem重适配
    var div = document.createElement('div');
    div.style.height = '0';
    div.style.width = '1.4rem';
    document.body.appendChild(div);
    var ideal = 140 * windowWidth / 750;
    var rmd = div.clientWidth / ideal;
    if (rmd > 1.05 || rmd < 0.95) {
      html.style.fontSize = 100 * (windowWidth / 750) / rmd + 'px';
    }
    document.body.removeChild(div);
}());