摘要:看了源碼,不懂為什么對于沒有縮放,而是粗放設置,導致很不精細,于是略微刪減代碼如下,留著自己備用,后續如果再學到了什么知識點,再回顧吧。本質上就是把設置成物理像素大小,再縮小到屏幕獨立像素這么大限制最大為
看了 flexible 源碼,不懂為什么對于android 沒有縮放,而是粗放設置,導致 android 很不精細,于是略微刪減代碼如下,留著自己備用,后續如果再學到了什么知識點,再回顧吧。
本質上就是把 viewport 設置成物理像素大小,再縮小到屏幕獨立像素這么大
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector("meta[name="viewport"]"); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } if (!dpr && !scale) { dpr = win.devicePixelRatio || 1; scale = 1 / dpr; } docEl.setAttribute("data-dpr", dpr); if (!metaEl) { metaEl = doc.createElement("meta"); metaEl.setAttribute("name", "viewport"); metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement("div"); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem() { var width = docEl.getBoundingClientRect().width; // 限制 rem 最大為 54px * dpr if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + "px"; flexible.rem = win.rem = rem; } win.addEventListener("resize", function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = 12 * dpr + "px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = 12 * dpr + "px"; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === "string" && d.match(/rem$/)) { val += "px"; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === "string" && d.match(/px$/)) { val += "rem"; } return val; } })(window, window["lib"] || (window["lib"] = {}));
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80773.html
摘要:看了源碼,不懂為什么對于沒有縮放,而是粗放設置,導致很不精細,于是略微刪減代碼如下,留著自己備用,后續如果再學到了什么知識點,再回顧吧。本質上就是把設置成物理像素大小,再縮小到屏幕獨立像素這么大限制最大為 看了 flexible 源碼,不懂為什么對于android 沒有縮放,而是粗放設置,導致 android 很不精細,于是略微刪減代碼如下,留著自己備用,后續如果再學到了什么知識點,再...
摘要:看了源碼,不懂為什么對于沒有縮放,而是粗放設置,導致很不精細,于是略微刪減代碼如下,留著自己備用,后續如果再學到了什么知識點,再回顧吧。本質上就是把設置成物理像素大小,再縮小到屏幕獨立像素這么大限制最大為 看了 flexible 源碼,不懂為什么對于android 沒有縮放,而是粗放設置,導致 android 很不精細,于是略微刪減代碼如下,留著自己備用,后續如果再學到了什么知識點,再...
摘要:更改文件名之后,在文件中寫入的代碼。控制增加前綴的版本根據頁面中的標簽及標簽中的選擇器屬性,來精簡樣式。 項目地址 既然重新學習了 Gulp,那索性就再把以前用 Gulp 寫的東西拿出來,重新寫一遍。這次寫的時候要把要點記錄下來,不然以后忘了就沒法回憶了。 因為 Gulp 現在使用沒有以前那么多了,所以就不寫復雜的應用了。這次寫一個簡單的 Demo 處理工具,只是為了把 PSD 轉成 ...
摘要:下載或在項目中引入一般情況在中引入設置標簽視情況而定安裝或在中配置,在項目文件中找到,將添加到中,,下的根據設計稿而定具體如下編譯新加由于設計稿是添加到里面省略項目中使用假設設計稿和分別是,具體代碼 1.下載lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在項目中引入lib-flexible 一般情況在...
閱讀 3452·2019-08-30 15:44
閱讀 797·2019-08-30 13:46
閱讀 2058·2019-08-30 11:05
閱讀 3332·2019-08-29 18:32
閱讀 2154·2019-08-29 13:56
閱讀 1296·2019-08-29 12:57
閱讀 756·2019-08-28 18:21
閱讀 1733·2019-08-26 12:16