前言：本文純屬轉載，詳情請參見原文 移動端高清、多屏適配方案 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>