移动端h5中rem适配 

  1 (function (win, lib) {
  2   var doc = win.document;
  3   var docEl = doc.documentElement;
  4   var metaEl = doc.querySelector('meta[name="viewport"]');
  5   var flexibleEl = doc.querySelector('meta[name="flexible"]');
  6   var dpr = 0;
  7   var scale = 0;
  8   var tid;
  9   var flexible = lib.flexible || (lib.flexible = {});
 10 
 11   if (metaEl) {
 12     console.warn("将根据已有的meta标签来设置缩放比例");
 13     var match = metaEl
 14       .getAttribute("content")
 15       .match(/initial\-scale=([\d\.]+)/);
 16     if (match) {
 17       scale = parseFloat(match[1]);
 18       dpr = parseInt(1 / scale);
 19     }
 20   } else if (flexibleEl) {
 21     var content = flexibleEl.getAttribute("content");
 22     if (content) {
 23       var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
 24       var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
 25       if (initialDpr) {
 26         dpr = parseFloat(initialDpr[1]);
 27         scale = parseFloat((1 / dpr).toFixed(2));
 28       }
 29       if (maximumDpr) {
 30         dpr = parseFloat(maximumDpr[1]);
 31         scale = parseFloat((1 / dpr).toFixed(2));
 32       }
 33     }
 34   }
 35   if (!dpr && !scale) {
 36     var isAndroid = win.navigator.appVersion.match(/android/gi);
 37     var isIPhone = win.navigator.appVersion.match(/iphone/gi);
 38     var devicePixelRatio = win.devicePixelRatio;
 39     if (isIPhone) {
 40       // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
 41       if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
 42         dpr = 3;
 43       } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
 44         dpr = 2;
 45       } else {
 46         dpr = 1;
 47       }
 48     } else {
 49       // 其他设备下，仍旧使用1倍的方案
 50       dpr = 1;
 51     }
 52     scale = 1 / dpr;
 53   }
 54   docEl.setAttribute("data-dpr", dpr);
 55   if (!metaEl) {
 56     metaEl = doc.createElement("meta");
 57     metaEl.setAttribute("name", "viewport");
 58     metaEl.setAttribute(
 59       "content",
 60       "initial-scale=" +
 61         scale +
 62         ", maximum-scale=" +
 63         scale +
 64         ", minimum-scale=" +
 65         scale +
 66         ", user-scalable=no"
 67     );
 68     if (docEl.firstElementChild) {
 69       docEl.firstElementChild.appendChild(metaEl);
 70     } else {
 71       var wrap = doc.createElement("div");
 72       wrap.appendChild(metaEl);
 73       doc.write(wrap.innerHTML);
 74     }
 75   }
 76   function refreshRem() {
 77     var width = docEl.getBoundingClientRect().width;
 78     if (width / dpr > 540) {
 79       width = 540 * dpr;
 80     }
 81     var rem = width / 7.5; // 屏幕分为7.5等分
 82     docEl.style.fontSize = rem + "px";
 83     flexible.rem = win.rem = rem;
 84   }
 85   win.addEventListener(
 86     "resize",
 87     function () {
 88       clearTimeout(tid);
 89       tid = setTimeout(refreshRem, 300);
 90     },
 91     false
 92   );
 93   win.addEventListener(
 94     "pageshow",
 95     function (e) {
 96       if (e.persisted) {
 97         clearTimeout(tid);
 98         tid = setTimeout(refreshRem, 300);
 99       }
100     },
101     false
102   );
103   if (doc.readyState === "complete") {
104     doc.body.style.fontSize = 12 * dpr + "px";
105   } else {
106     doc.addEventListener(
107       "DOMContentLoaded",
108       function (e) {
109         doc.body.style.fontSize = 12 * dpr + "px";
110       },
111       false
112     );
113   }
114 
115   refreshRem();
116   flexible.dpr = win.dpr = dpr;
117   flexible.refreshRem = refreshRem;
118   flexible.rem2px = function (d) {
119     var val = parseFloat(d) * this.rem;
120     if (typeof d === "string" && d.match(/rem$/)) {
121       val += "px";
122     }
123     return val;
124   };
125   flexible.px2rem = function (d) {
126     var val = parseFloat(d) / this.rem;
127     if (typeof d === "string" && d.match(/px$/)) {
128       val += "rem";
129     }
130     return val;
131   };
132 })(window, window["lib"] || (window["lib"] = {}));

 

 

posted @ 2021-10-13 13:58  鼓舞飞扬  阅读(316)  评论(0)  编辑  收藏  举报