摘要:看了源码,不懂为什么对于没有缩放,而是粗放设置,导致很不精细,于是略微删减代码如下,留着自己备用,后续如果再学到了什么知识点,再回顾吧。本质上就是把设置成物理像素大小,再缩小到屏幕独立像素这么大限制最大为
看了 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"] = {}));
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111706.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 一般情况在...
阅读 3109·2023-04-26 01:30
阅读 638·2021-11-08 13:15
阅读 1699·2021-09-24 10:35
阅读 915·2021-09-22 15:41
阅读 1904·2019-08-30 15:44
阅读 560·2019-08-30 13:22
阅读 979·2019-08-30 13:06
阅读 1160·2019-08-29 13:22