手機html根據手機解析度網頁文字大小自適應
阿新 • • 發佈：2019-01-25
問題：不同手機型號螢幕尺寸大不相同，導致同樣的文字，有的顯示一行，有的顯示多行。
通過查資料和自己的嘗試解決；網頁開發習慣的px單位，手機html開發不適用。
原始碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--防止手機頁面縮放--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>Document</title> </head> <body> <!-- 文字單位設定為rem即可，通過微信開發者工具切換手機型號檢視效果。 --> <div style='border:1px red solid;border-radius:100px;font-size:1rem;'>測試手機端文字的自適應</div> </body> <script> /* 利用js計算當前裝置的DPR，動態設定在html標籤上，並動態設定html的font-size，*/ !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 = {})); </script> </html>