移动端大图缩放模糊_[移动端高清适配方案(解决图片模糊问题、1px细线问题)]移动端高清适配...

JS部分

var dpr, rem, scale;

var docEl = document.documentElement;

var fontEl = document.createElement('style');

var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;

console.log(dpr);

rem = docEl.clientWidth * dpr / 16;

scale = 1 / dpr;

// 设置viewport，进行缩放，达到高清效果

metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用

docEl.setAttribute('data-dpr', dpr);

// 动态写入样式

docEl.firstElementChild.appendChild(fontEl);

fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 给js调用的，某一dpr下rem和px之间的转换函数

window.rem2px = function(v) {

v = parseFloat(v);

return v * rem;

};

window.px2rem = function(v) {

v = parseFloat(v);

return v / rem;

};

window.dpr = dpr;

window.rem = rem;

========================================================

Less部分

//这里主要是rem字体大小有变化,这里主要是兼容手机端

.px2px(@name, @px){

@{name}: round(@px / 2) * 1px;

[data-dpr="1"] & {

@{name}: @px * 1px;

}

[data-dpr="2"] & {

@{name}: @px * 1px;

}

// for mx3

[data-dpr="2.5"] & {

@{name}: round(@px * 2.5 / 2) * 1px;

}

// for 小米note

[data-dpr="2.75"] & {

@{name}: round(@px * 2.75 / 2) * 1px;

}

[data-dpr="3"] & {

@{name}: round(@px / 2 * 3) * 1px

}

// for 三星note4

[data-dpr="4"] & {

@{name}: @px * 2px;

}

}

本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中(快捷键Ctrl+D);或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！