移动端适配方案-rem

(function () {
  // 获取viewport
  var getViewport = function () {
    let meta = document.getElementsByName('viewport')[0];
    if (!meta) {
      meta = document.createElement('meta');
      meta.setAttribute('name', 'viewport');
      document.head.appendChild(meta);
    }
    return meta
  };

  var fn = function () {
    // 750px设计稿为基准
    var designSize = 750;
    // 转换比例，1rem = 100px;
    var ratio = 100;
    // 设备像素比，假值：使用设备像素比；真值：固定像素比
    var dpr = 0 || window.devicePixelRatio;
    // viewport缩放
    var scale = 1 / dpr;
    // font-size
    document.documentElement.style.fontSize = window.innerWidth / designSize * ratio + 'px';
    // viewport
    var content = 'width=device-width, user-scalable=no, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale;
    getViewport().setAttribute('content', content);
    // body元素font-size，系统默认font-size：14px，对应750设计稿：28
    var defaultFontSize = 28;
    var style = document.createElement('style');
    style.innerHTML = 'body {font-size: ' + defaultFontSize / ratio + 'rem;}';
    document.head.appendChild(style);
  };

  fn();

  // window resize
  var ev = "orientationchange" in window ? "orientationchange" : "resize";
  window.addEventListener(ev, fn);
})();