dpr的配置
首先，在引入flexible.js之前，我們可以對dpr進行手動的配置，即使用自定義的meta標簽來配置dpr（看清楚是flexible，而非viewport）
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
iniital-dpr是把dpr強制設定為給定的值，而maximum-dpr則是給出一個最大的dpr限制，然后對其和系統(tǒng)的dpr做一個比較。
然后依然為了方便閱讀我把flexble.js這一部分的代碼抽象出來，
var doc = window.document
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0; //縮放比例
//在meta標簽中，已經(jīng)有了viewport，則使用已有的viewport,并根據(jù)meta標簽，對dpr進行設置
if (metaEl) {
console.warn('將根據(jù)已有的meta標簽來設置縮放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
//如果在meta標簽中，我們手動配置了flexible，則使用里面的內(nèi)容
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
這樣,我們通過flexible的分析與獲取，對dpr進行了書寫。不過其實這里，是有個問題的。即在書寫maximum的的情況下，其實根本沒有像文檔中給我們的說法一樣，做一個比較，而是做了和initialDpr一樣的一個處理。不過這里也不對其做一個探討了。
然后，這套解決方案，然后當我們在meta標簽里面并沒有對viewport以及flexible兩個的任意一個進行書寫的時候，他也是會自動獲取一個dpr值的
if (!dpr && !scale) {
var isAndroid = window.navigator.appVersion.match(/android/gi);
var isIPhone = window.navigator.appVersion.match(/iphone/gi);、
//devicePixelRatio這個屬性是可以獲取到設備的dpr的
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他設備下，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
這里我們可以看到，手機淘寶并沒有對安卓的dpr進行一個適配，原因之后再講。
然后到了這里，我們獲取到了我們需要的dpr值，并根據(jù)dpr值獲取到了我們所需要的縮放值（即scale）
然后我們要做的，就是在并沒有viewport的meta標簽對情況下自己動態(tài)將這個標簽寫進我們的header，形式是這樣的
<meta name="viewport" content="initial-scale=scale, maximum-scale=scale, minimum-scale=scale, user-scalable=no">
這樣，dpr的配置，也就完成了，當然，安卓設備并沒有對dpr進行一個配置（上面的動態(tài)生成就不給出js了）
