https://polyu-dybri.com/assets/static/site/np_template/js/base.js

1/*字体大小控制*/
2!function (win, lib) {
3    var timer,
4            doc = win.document,
5            docElem = doc.documentElement,
6            vpMeta = doc.querySelector('meta[name="viewport"]'),
7            flexMeta = doc.querySelector('meta[name="flexible"]'),
8            dpr = 0,
9            scale = 0,
10            flexible = lib.flexible || (lib.flexible = {});
11
12    // 设置了 viewport meta
13    if (vpMeta) {
14        var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
15
16        if (initial) {
17            scale = parseFloat(initial[1]); // 已设置的 initialScale
18            dpr = parseInt(1 / scale);      // 设备像素比 devicePixelRatio
19        }
20    }
21    // 设置了 flexible Meta
22    else if (flexMeta) {
23        var flexMetaContent = flexMeta.getAttribute("content");
24        if (flexMetaContent) {
25
26            var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
27                    maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);
28
29            if (initial) {
30                dpr = parseFloat(initial[1]);
31                scale = parseFloat((1 / dpr).toFixed(2));
32            }
33
34            if (maximum) {
35                dpr = parseFloat(maximum[1]);
36                scale = parseFloat((1 / dpr).toFixed(2));
37            }
38        }
39    }
40
41    // viewport 或 flexible
42    // meta 均未设置
43    if (!dpr && !scale) {
44        var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)), _dpr = win.devicePixelRatio;
45        dpr = u ? ((_dpr >= 3 && (!dpr || dpr >= 3)) ? 3 : (_dpr >= 2 && (!dpr || dpr >= 2)) ? 2 : 1) : 1;
46        scale = 1 / dpr;
47    }
48
49    docElem.setAttribute("data-dpr", dpr);
50
51    // 插入 viewport meta
52    if (!vpMeta) {
53        vpMeta = doc.createElement("meta");
54
55        vpMeta.setAttribute("name", "viewport");
56        vpMeta.setAttribute("content",
57                "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
58
59        if (docElem.firstElementChild) {
60            docElem.firstElementChild.appendChild(vpMeta)
61        } else {
62            var div = doc.createElement("div");
63            div.appendChild(vpMeta);
64            doc.write(div.innerHTML);
65        }
66    }
67
68    function setFontSize() {
69        //var d=E.getBoundingClientRect().width;d/B>540&&(d=540*B);var e=d/10;E.style.fontSize=e+"px",z.rem=J.rem=e
70        var winWidth = docElem.getBoundingClientRect().width;
71        if (winWidth / dpr > 540) {
72            (winWidth = 540 * dpr);
73        }
74
75        // 根节点 fontSize 根据宽度决定
76        var baseSize = winWidth / 10;
77
78        docElem.style.fontSize = baseSize + "px";
79        flexible.rem = win.rem = baseSize;
80    }
81
82    // 调整窗口时重置
83    win.addEventListener("resize", function () {
84        clearTimeout(timer);
85        timer = setTimeout(setFontSize, 300);
86    }, false);
87
88    // orientationchange 时也需要算下
89    win.addEventListener("orientationchange", function () {
90        clearTimeout(timer);
91        timer = setTimeout(setFontSize, 300);
92    }, false);
93
94    // pageshow
95    // keyword: 倒退 缓存相关
96    win.addEventListener("pageshow", function (e) {
97        if (e.persisted) {
98            clearTimeout(timer);
99            timer = setTimeout(setFontSize, 300);
100        }
101    }, false);
102
103    // 设置基准字体
104    if ("complete" === doc.readyState) {
105        doc.body.style.fontSize = 12 * dpr + "px";
106    } else {
107        doc.addEventListener("DOMContentLoaded", function () {
108            doc.body.style.fontSize = 12 * dpr + "px";
109        }, false);
110    }
111
112    setFontSize();
113
114    flexible.dpr = win.dpr = dpr;
115
116    flexible.refreshRem = setFontSize;
117
118    flexible.rem2px = function (d) {
119        var c = parseFloat(d) * this.rem;
120        if ("string" == typeof d && d.match(/rem$/)) {
121            c += "px";
122        }
123        return c;
124    };
125
126    flexible.px2rem = function (d) {
127        var c = parseFloat(d) / this.rem;
128        if ("string" == typeof d && d.match(/px$/)) {
129            c += "rem";
130        }
131        return c;
132    }
133}(window, window.lib || (window.lib = {}));