1. 程式人生 > 其它 >移動端h5中rem適配

移動端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"] = {}));