移動端動態font-size

/**
 * Created by shimin on 2017/8/18.
 */
//計算dpr
!function(win, lib) {
 var timer,
 doc = win.document,
 docElem = doc.documentElement,

 vpMeta = doc.querySelector('meta[name="viewport"]'),
 flexMeta = doc.querySelector('meta[name="flexible"]'),

 dpr = 0,
 scale = 0,

 flexible = lib.flexible || (lib.flexible = {});

 // 設置了 viewport meta
 if (vpMeta) {

 console.warn("將根據已有的meta標籤來設置縮放比例");
 var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);

 if (initial) {
 scale = parseFloat(initial[1]); // 已設置的 initialScale
 dpr = parseInt(1 / scale); // 設備像素比 devicePixelRatio
 }

 }
 // 設置了 flexible Meta
 else if (flexMeta) {
 var flexMetaContent = flexMeta.getAttribute("content");
 if (flexMetaContent) {

 var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
 maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);

 if (initial) {
 dpr = parseFloat(initial[1]);
 scale = parseFloat((1 / dpr).toFixed(2));
 }

 if (maximum) {
 dpr = parseFloat(maximum[1]);
 scale = parseFloat((1 / dpr).toFixed(2));
 }
 }
 }

 // viewport 或 flexible
 // meta 均未設置
 if (!dpr && !scale) {
 // QST
 // 這裏的 第一句有什麼用 ?
 // 和 Android 有毛關係 ?
 var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
 _dpr = win.devicePixelRatio;

 // 因此這裏彷佛是將全部 Android 設備都設置爲 1 了
 dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
 ? 3
 : (_dpr >= 2 && (!dpr || dpr >= 2))
 ? 2
 : 1
 )
 : 1;

 scale = 1 / dpr;
 }

 docElem.setAttribute("data-dpr", dpr);

 // 插入 viewport meta
 if (!vpMeta) {
 vpMeta = doc.createElement("meta");

 vpMeta.setAttribute("name", "viewport");
 vpMeta.setAttribute("content",
 "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

 if (docElem.firstElementChild) {
 docElem.firstElementChild.appendChild(vpMeta)
 } else {
 var div = doc.createElement("div");
 div.appendChild(vpMeta);
 doc.write(div.innerHTML);
 }
 }

 function setFontSize() {
 var winWidth = docElem.getBoundingClientRect().width;

 if (winWidth / dpr > 540) { (winWidth = 540 * dpr); } // 根節點 fontSize 根據寬度決定 var baseSize = winWidth / 10; docElem.style.fontSize = baseSize + "px"; flexible.rem = win.rem = baseSize; } // 調整窗口時重置 win.addEventListener("resize", function() { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); // 這一段是我本身加的 // orientationchange 時也須要重算下吧 win.addEventListener("orientationchange", function() { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); // pageshow // keyword: 倒退 緩存相關 win.addEventListener("pageshow", function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); // 設置基準字體 if ("complete" === doc.readyState) { doc.body.style.fontSize = 12 * dpr + "px"; } else { doc.addEventListener("DOMContentLoaded", function() { doc.body.style.fontSize = 12 * dpr + "px"; }, false); } setFontSize(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = setFontSize; flexible.rem2px = function(d) { var c = parseFloat(d) * this.rem; if ("string" == typeof d && d.match(/rem$/)) { c += "px"; } return c; }; flexible.px2rem = function(d) { var c = parseFloat(d) / this.rem; if ("string" == typeof d && d.match(/px$/)) { c += "rem"; } return c; }}(window, window.lib || (window.lib = {}));//計算viewport!(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { var width = docEle.clientWidth; width && (docEle.style.fontSize = 20 * (width / 320) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false);}(document, window));//媒體查詢設置rem@media screen and (min-width: 320px) { html {font-size: 14px;}}@media screen and (min-width: 360px) { html {font-size: 16px;}}@media screen and (min-width: 400px) { html {font-size: 18px;}}@media screen and (min-width: 440px) { html {font-size: 20px;}}@media screen and (min-width: 480px) { html {font-size: 22px;}}@media screen and (min-width: 640px) { html {font-size: 28px;}}