前言:本文纯属转载,详情请参见原文 移动端高清、多屏适配方案 at 前端乱炖 @ Lovesueee
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">
<title>retina</title>
<script type="text/javascript">
window.onload = function(){
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
/*(Aidan Dai)
var bool = (2 && 3);
var bool2 = (2 && -1);
var bool3 = (-2 && -1);
console.log(bool);
console.log(bool2);
console.log(bool3);
var bool = (2 || 3);
var bool2 = (2 || -1);
var bool3 = (-2 || -1);
console.log(bool);
console.log(bool2);
console.log(bool3);
var bool = !-2;
var bool2 = !2;
console.log(bool);
console.log(bool2);
*/
/*js中(Aidan Dai)
**含有&&和||逻辑运算符的表达式返回参与该表达式运算数之一
**含有!逻辑运算符的表达式返回true或false
*/
//设备像素比: window.devicePixelRatio
//设备独立像素:设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素
//物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值
//位图像素:一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)
dpr = window.devicePixelRatio || 1;
//显示器分辨率:clientWidth(Aidan Dai)
rem = docEl.clientWidth * dpr / 10;
// 理论上:1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示
scale = 1 / dpr;
fontEl.setAttribute("type","text/css");
// 设置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;
}
</script>
</head>
<body></body>
</html>