https://skyfend.com/public/files/js/rem.js

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