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.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 |
|
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 |
|
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 | if (width / dpr > 540) {
|
71 | width = 540 * dpr;
|
72 | }
|
73 | var rem = width / 10;
|
74 | docEl.style.fontSize = rem + 'px';
|
75 | flexible.rem = win.rem = rem;
|
76 | }
|
77 |
|
78 | win.addEventListener('resize', function() {
|
79 | clearTimeout(tid);
|
80 | tid = setTimeout(refreshRem, 300);
|
81 | }, false);
|
82 | win.addEventListener('pageshow', function(e) {
|
83 | if (e.persisted) {
|
84 | clearTimeout(tid);
|
85 | tid = setTimeout(refreshRem, 300);
|
86 | }
|
87 | }, false);
|
88 |
|
89 | if (doc.readyState === 'complete') {
|
90 | doc.body.style.fontSize = 12 * dpr + 'px';
|
91 | } else {
|
92 | doc.addEventListener('DOMContentLoaded', function(e) {
|
93 | doc.body.style.fontSize = 12 * dpr + 'px';
|
94 | }, false);
|
95 | }
|
96 |
|
97 |
|
98 | refreshRem();
|
99 |
|
100 | flexible.dpr = win.dpr = dpr;
|
101 | flexible.refreshRem = refreshRem;
|
102 | flexible.rem2px = function(d) {
|
103 | var val = parseFloat(d) * this.rem;
|
104 | if (typeof d === 'string' && d.match(/rem$/)) {
|
105 | val += 'px';
|
106 | }
|
107 | return val;
|
108 | }
|
109 | flexible.px2rem = function(d) {
|
110 | var val = parseFloat(d) / this.rem;
|
111 | if (typeof d === 'string' && d.match(/px$/)) {
|
112 | val += 'rem';
|
113 | }
|
114 | return val;
|
115 | }
|
116 |
|
117 | })(window, window['lib'] || (window['lib'] = {})); |
\ | No newline at end of file |