(function (win) {
function resize() {
var domWidth = domEle.getBoundingClientRect().width;
win.rem = domWidth / 16;
domEle.style.fontSize = win.rem + "px"
}
var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');
if (viewport) {
var o = viewport.getAttribute("content").match(/initial-scale=(["']?)([d.]+)1?/);
if (o) {
initial_scale = parseFloat(o[2]);
v = parseInt(1 / initial_scale)
}
} else {
if (flexible) {
var o = flexible.getAttribute("content").match(/initial-dpr=(["']?)([d.]+)1?/);
if (o) {
v = parseFloat(o[2]);
initial_scale = parseFloat((1 / v).toFixed(2))
}
}
}
if (!v && !initial_scale) {
var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
v = win.devicePixelRatio;
v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
}
if (domEle.setAttribute("data-dpr", v), !viewport) {
if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
domEle.firstElementChild.appendChild(viewport)
} else {
var m = dom.createElement("div");
m.appendChild(viewport), dom.write(m.innerHTML)
}
}
win.dpr = v;
win.addEventListener("resize", function () {
clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
}, false);
win.addEventListener("pageshow", function (b) {
b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
}, false);
resize()
})(window)
手机端适配 REM布局
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》,意外受到很多朋友的关注和喜欢。但随着时间的推移,该方...
- 一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》,意外受到很多朋友的关注和喜欢。但随着时间的推移,该方...
- 这是我之前一直使用的第一种rem方案。贴代码 这段代码的意思就是,通过页面加载的时候去获取用户设备的物理像素比,然...
- vue做移动端适配,借助px2rem 插件方便的将px单位转为了rem。 1、安装 npm install px2...