https://mindcrush-games.com/js/flexible.js

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