摘要：談?wù)劦钠僚c安卓的各種屏布局也好，用進(jìn)行縮放也罷，文字的適配問(wèn)題也是，都是基于我們想對(duì)各個(gè)不同的設(shè)備所進(jìn)行的匹配。

感謝csdn原文：淺談前端移動(dòng)端頁(yè)面開(kāi)發(fā)（布局篇）
感謝：移動(dòng)前端自適應(yīng)解決方案和比較
使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配

什么是viewport
簡(jiǎn)單來(lái)講，viewport就是瀏覽器上，用來(lái)顯示網(wǎng)頁(yè)的那一部分區(qū)域了，也就是說(shuō)，瀏覽器的實(shí)際寬度，是和我們手機(jī)的寬度不一樣的，無(wú)論你的手機(jī)寬度是320px，還是640px，在手機(jī)瀏覽器內(nèi)部的寬度，始終會(huì)是瀏覽器本身的viewport。如今的瀏覽器，都會(huì)給自己的本身提供一個(gè)viewport的默認(rèn)值，可能是980px，或者是其他值。就以手機(jī)來(lái)說(shuō)吧，目前，新版本的手機(jī)瀏覽器，絕大部分是以980px作為默認(rèn)的viewport值的。我這里對(duì)新版本的不同平臺(tái)下的瀏覽器做了測(cè)試，經(jīng)過(guò)測(cè)試，iphone下的默認(rèn)viewport為980px，安卓下的瀏覽器，目前主流的最新瀏覽器（比如chrome，還有很多國(guó)產(chǎn)的像qq，uc）的viewport也是980px了。

viewport是用來(lái)干什么的
viewport的默認(rèn)值，一般來(lái)說(shuō)是大于手機(jī)屏幕的。這樣就可以做到當(dāng)我們?cè)跒g覽桌面端網(wǎng)頁(yè)的時(shí)候，可以讓桌面端端網(wǎng)頁(yè)正常顯示（我們普通頁(yè)面設(shè)計(jì)的時(shí)候，一般頁(yè)面的主區(qū)域是以960px來(lái)做的，所以980px這個(gè)值，可以做到桌面端網(wǎng)頁(yè)的正常顯示）。但是，其實(shí)我們手機(jī)的屏幕寬度是沒(méi)有960px的，因此瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條。同時(shí)，即使是基于980的viewport，我們?cè)谝苿?dòng)端瀏覽我們的桌面頁(yè)面的體驗(yàn)其實(shí)也并不好，所以，一般的，我們會(huì)專門(mén)給瀏覽器設(shè)計(jì)一個(gè)移動(dòng)端的頁(yè)面。

對(duì)viewport的控制
如今可以絕大部分瀏覽器里（即主流的安卓瀏覽器和iOS），都支持對(duì)viewport的一個(gè)控制了。一般的，我們會(huì)這么寫(xiě)。

viewport默認(rèn)有6個(gè)屬性
width: 設(shè)置viewport的寬度（即之前所提及到的，瀏覽器的寬度詳），這里可以為一個(gè)整數(shù)，又或者是字符串"width-device"

initial-scale: 頁(yè)面初始的縮放值，為數(shù)字，可以是小數(shù)
minimum-scale: 允許用戶的最小縮放值，為數(shù)字，可以是小數(shù)
maximum-scale: 允許用戶的最大縮放值，為數(shù)字，可以是小數(shù)
height: 設(shè)置viewport的高度（我們一般而言并不能用到）
user-scalable: 是否允許用戶進(jìn)行縮放，"no"為不允許，"yes"為允許

我們把這個(gè)標(biāo)簽是在head里面，像這樣

這樣就可以做到對(duì)viewport的控制了

三個(gè)需要了解的概念:

PPI: 可以理解為屏幕的顯示密度

DPR: 設(shè)備物理像素和邏輯像素的對(duì)應(yīng)關(guān)系，即物理像素/邏輯像素

Resolution: 就是我們常說(shuō)的分辨率

物理像素與邏輯像素
看了我們上面內(nèi)容一的第一點(diǎn)之后，或許有些人會(huì)有些疑問(wèn)，我的安卓手機(jī)，或者iphone6plus(目前應(yīng)該僅限于這一款機(jī)型吧)，買(mǎi)回來(lái)的是1920x1080的或者其他更高的，比我之前所謂的那個(gè)viewport默認(rèn)的980px要大。
這樣的問(wèn)題，也就是我之前所說(shuō)的物理像素與邏輯像素的關(guān)系了（即DPR）。以1920x1080為例，1080為物理像素，而我們?cè)趘iewport中，獲取到的，比如"width-device"，是邏輯像素。所以之前viewport的默認(rèn)值，所比對(duì)的大小，其實(shí)是邏輯像素的大小，而非物理像素的大小。
以iphone6為例，在不做任何縮放的條件下，iphone6的獲取到的"width-device"為375px,為屏幕的邏輯像素。而購(gòu)買(mǎi)時(shí)我們所知的750px，則為屏幕的物理像素。

CSS的問(wèn)題
有了上面第二點(diǎn)的一些基礎(chǔ)，還是以iphone6為例，我們可以知道，其實(shí)我們所寫(xiě)的1px，在iphone6上為2px的物理像素。所以，最后的，給出一個(gè)結(jié)論。就是我們寫(xiě)的1px，在移動(dòng)端，是邏輯像素的1px，而非物理像素的1px。

簡(jiǎn)單說(shuō)下rem
rem是根據(jù)頁(yè)面的根元素的font-size的一個(gè)相對(duì)的單位，即

html{
    font-size: 16px;
}    

比如當(dāng)我們?cè)谝粋€(gè)div中，如此寫(xiě)

div{
    width: 2rem;
}

那么我們的width，是16*2 = 32px
rem做到適配不同分辨率
這個(gè)是現(xiàn)在手機(jī)淘寶的移動(dòng)端的解決方案，即使用rem的特性，來(lái)對(duì)頁(yè)面進(jìn)行布局。
下面舉一個(gè)例子
假定設(shè)計(jì)稿的大小為750，那么我們則將整個(gè)圖分成100份來(lái)看（下面的題外話會(huì)說(shuō)明為什么會(huì)分成100份來(lái)看）
那么，我們現(xiàn)在就讓根部元素的font-size為75px

html{
    font-size: 75px;
}

那么，我們現(xiàn)在就可以比對(duì)設(shè)計(jì)稿，比如設(shè)計(jì)稿中，有一個(gè)div元素，寬度，高度都為75px,那么我們這樣寫(xiě)即可

div{
    height: 1rem;
    width: 1rem;
}

可能看到這里，一些人還是不明白怎么用rem做到適配不同的分辨率，那么我們?cè)賮?lái)
現(xiàn)在，我們換設(shè)備了，不用這個(gè)設(shè)備是一個(gè)width為640的手機(jī)
那么這個(gè)時(shí)候，我們的rem單位就起到作用了。
我們的rem全是根據(jù)html的font-size來(lái)改變的，所以說(shuō)，這個(gè)時(shí)候，我們只需要把html下的font-size改成64px。那么，我們之前的div，因?yàn)槭歉鶕?jù)html下的font-size動(dòng)態(tài)變化的，那么。此時(shí)也就變成了寬度和高度都為64px的東西了。這樣，就可以做到適配不同的屏幕分辨率了。（其實(shí)就是個(gè)等比縮放）
總結(jié)一下，我們的解決方案，其實(shí)就是 設(shè)計(jì)稿的像素/html的font-size = 用來(lái)代替px的rem。
這一個(gè)步驟，我們需要通過(guò)JS來(lái)進(jìn)行操作。
對(duì)于js的操作在下面會(huì)提到。

DPR的問(wèn)題

視覺(jué)姐姐給了我們?cè)O(shè)計(jì)稿，并交由我們實(shí)現(xiàn)，那么，我們應(yīng)該去認(rèn)真的實(shí)現(xiàn):-)（試想你做了一張圖，而前端很多地方并沒(méi)有按照你所想的，你所給的去做，而是私自改變了很多東西，你肯定會(huì)不高興的）
那么1px會(huì)出現(xiàn)什么問(wèn)題呢。
還記得我們第二大點(diǎn)講的，我們的設(shè)備，是有物理像素和邏輯像素的。而假設(shè)我們的設(shè)計(jì)稿是750的，同時(shí)還是以iphone6為例，此時(shí)如果我們的viewport是這樣的

之前說(shuō)過(guò)，在不做任何縮放的條件下，iphone6獲取到的viewport為375px。
然后我們的頁(yè)面中有個(gè)div，他有一個(gè)邊框值，如下

div{
    height: 5rem;
    widht:5rem;
    border: 1px solid #000
}

此時(shí)我們寫(xiě)的1px，實(shí)際上是邏輯像素，而我們?cè)趇phone6上看到的是物理像素，于是這個(gè)時(shí)候，我們眼睛所看到的其實(shí)是2px（參考第二點(diǎn)第三個(gè)問(wèn)題）
所以此時(shí)我們需要在viewport上做文章了，此時(shí)先明確，如果要獲取到真正的1px，那么我們需要這么做，將viewport改為

即對(duì)屏幕做0.5倍的縮放。這樣，我們就能得到實(shí)際的1px。
所以到這里，我們還要明確一點(diǎn)，viewport的meta標(biāo)簽，我們這里也只能通過(guò)js來(lái)動(dòng)態(tài)生成。
同時(shí)，這樣寫(xiě)，據(jù)說(shuō)還可以避免比如inline的SVG等元素按照邏輯像素的渲染。避免了整個(gè)頁(yè)面清晰度的打折（其實(shí)我并不能看出來(lái)）
文字適配問(wèn)題
最近深深糾結(jié)與rem與px做字體單位的問(wèn)題，還是先分別談下二者吧。

rem與px的特點(diǎn)：
以rem作為字體單位:我們可以讓頁(yè)面整體的文字，也跟隨著html的font-size來(lái)進(jìn)行改變，這樣，在不同的屏幕下，可以做到文字相對(duì)屏幕的比例是一樣的。

以px作為字體單位: 這個(gè)是目前很多網(wǎng)站還是依然采用的方法。因?yàn)橐陨厦嫠鶎?xiě)的，以rem作為字體單位。無(wú)論在任何屏幕下面，我們的文字都會(huì)根據(jù)屏幕做一個(gè)適應(yīng)。試想這樣一個(gè)場(chǎng)景。你買(mǎi)了一個(gè)大屏手機(jī)（5.7寸的），而別人用的是4寸的手機(jī)。以rem作為字體單位的話，那大屏手機(jī)看到的文字多少和小屏手機(jī)確實(shí)一樣的了。這樣來(lái)做，其實(shí)并不符合我們買(mǎi)大屏手機(jī)的期待。同時(shí)，以rem作為字體單位，可能會(huì)導(dǎo)致出現(xiàn)很多奇怪的字體大?。ó吘故歉鶕?jù)html的font-size動(dòng)態(tài)變化的嘛），同時(shí)這其中還涉及到了一個(gè)點(diǎn)陣尺寸的概念，這個(gè)在下面來(lái)講。

字體大小引發(fā)的系列問(wèn)題：
字體大小：我們平時(shí)也看過(guò)，很多網(wǎng)站，是不以奇數(shù)作為字體大小的。我稍微查了些東西，在知乎上的現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中的為什么少有人用 11px、13px、15px 等奇數(shù)的字體？問(wèn)題下，有一些比較好的解答，我就不再多說(shuō)（我也并不能比這個(gè)問(wèn)題說(shuō)的更多），總的來(lái)說(shuō)，其實(shí)就是偶數(shù)寬度的字體能夠顯得均衡，以及一個(gè)點(diǎn)陣的問(wèn)題。不過(guò)因?yàn)橐劶包c(diǎn)陣，所以我拿上面回答中的一個(gè)內(nèi)容舉例。

倘若一個(gè)字體，只提供了12px，14px，16px的點(diǎn)陣。那么當(dāng)你寫(xiě)13px，15px，17px的時(shí)候。就并沒(méi)有其字體大小所對(duì)應(yīng)的點(diǎn)陣。那么這樣就造成了一個(gè)問(wèn)題。他們會(huì)使用其相鄰的點(diǎn)陣，比如對(duì)應(yīng)使用了12px，14px，16px的點(diǎn)陣，而導(dǎo)致一個(gè)問(wèn)題，文字占用的大小確實(shí)改變，但點(diǎn)陣卻并沒(méi)有改變。

文字適配的解決方案：
上面說(shuō)了這么多，我們總要有一套解決方案吧

對(duì)于一些標(biāo)題性的文字，我們依然可以用rem。讓他隨著屏幕來(lái)進(jìn)行縮放，因?yàn)闃?biāo)題性文字一般較大，而較大的文字，點(diǎn)陣對(duì)其影響就越小。這樣，即使出現(xiàn)奇怪的尺寸，也能夠讓字體得到很好的渲染。
對(duì)于一些正文內(nèi)容的文字（即站在使用者的角度，你不希望他進(jìn)行縮放的文字）。我們采用px來(lái)進(jìn)行處理。

在 三.使用rem布局 里面，我們給出了各種情況的解決方案，并且，在我舉例的時(shí)候，熱衷于使用iphone來(lái)舉例，但其實(shí)，上面的所有問(wèn)題，不是僅僅iphone會(huì)出現(xiàn)的問(wèn)題，安卓也是一樣。但是，如果你已經(jīng)看完了上面，那么這里，才是真正給出我們解決方案的地方，并且，這個(gè)解決方案并不完善。
談?wù)刬phone的r屏與安卓的各種屏
rem布局也好，用viewport進(jìn)行縮放也罷，文字的適配問(wèn)題也是，都是基于我們想對(duì)各個(gè)不同的設(shè)備所進(jìn)行的匹配。這套方案很好，然而也有其兼顧不到的地方。即安卓和ios的屏幕的一些問(wèn)題，當(dāng)然，細(xì)的東西我們不談，我們只談dpr。
先談iphone
其實(shí)iphone為開(kāi)發(fā)者考慮到了很多東西，為了讓開(kāi)發(fā)者便于開(kāi)發(fā)，在6plus出現(xiàn)之前，iphone的dpr始終也就是2（即前面所談的物理像素/邏輯像素＝2），即使是6plus出現(xiàn)了，iphone到底其實(shí)也就只有2，3這兩個(gè)dpr。我們很容易對(duì)其做到兼顧。
再談安卓
安卓并沒(méi)有對(duì)自己的屏幕叫做r屏，但是其原理和iphone的r屏可以說(shuō)是一樣。r屏做的是什么，把兩個(gè)（三個(gè)）物理像素，丟到了一個(gè)邏輯像素里面，讓屏幕展現(xiàn)的更清晰（當(dāng)然，這是我片面的理解，不過(guò)我覺(jué)得大體來(lái)說(shuō)并沒(méi)有錯(cuò)，我們也不用去深入探討r屏還有什么東西，我也并不懂）。而安卓也是一樣，他也同樣把n個(gè)物理像素丟到了一個(gè)邏輯像素里面。而這里的n，也就是dpr值（所以當(dāng)我看到好多人問(wèn)安卓為什么不采用r屏的時(shí)候，我真的也是……醉了？）。而安卓的dpr值，并不像iphone那樣，就只有兩個(gè)值。安卓的dpr是千奇百怪的，可能是1.5，2，3，4，2.5等等的都有。（甚至我還看到了1.7之類的，安卓的各個(gè)設(shè)備商，玩的真尼瑪high啊。怎么高興怎么來(lái)。）
所以，對(duì)安卓的屏幕的dpr的處理，其實(shí)是很頭疼的，因?yàn)?，他和我們?duì)字體的處理，有了很大的沖突。這個(gè)在下面提及
首先看看手淘的解決方案
rem布局
用js獲取到頁(yè)面的寬度，然后對(duì)其進(jìn)行寬度/10的處理，再將其寫(xiě)到html的font-size中。手淘的flexible.js里面的這一部分，并為了方便看懂做了些改寫(xiě)。大體就是這樣的
function refreshRem(){

 var docEl = window.document.documentElement;
var width = docEl.documentElement.getBoundingClientRect().width;

var rootSize = width/10;
docEl.style.fontSize = rootSize + "px";

}
dpr的配置
首先，在引入flexible.js之前，我們可以對(duì)dpr進(jìn)行手動(dòng)的配置，即使用自定義的meta標(biāo)簽來(lái)配置dpr（看清楚是flexible，而非viewport）

iniital-dpr是把dpr強(qiáng)制設(shè)定為給定的值，而maximum-dpr則是給出一個(gè)最大的dpr限制，然后對(duì)其和系統(tǒng)的dpr做一個(gè)比較。
然后依然為了方便閱讀我把flexble.js這一部分的代碼抽象出來(lái)，

    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標(biāo)簽中，已經(jīng)有了viewport，則使用已有的viewport,并根據(jù)meta標(biāo)簽，對(duì)dpr進(jìn)行設(shè)置
    if (metaEl) {
        console.warn("將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例");
        var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    //如果在meta標(biāo)簽中，我們手動(dòng)配置了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));
}
}
}

這樣,我們通過(guò)flexible的分析與獲取，對(duì)dpr進(jìn)行了書(shū)寫(xiě)。不過(guò)其實(shí)這里，是有個(gè)問(wèn)題的。即在書(shū)寫(xiě)maximum的的情況下，其實(shí)根本沒(méi)有像文檔中給我們的說(shuō)法一樣，做一個(gè)比較，而是做了和initialDpr一樣的一個(gè)處理。不過(guò)這里也不對(duì)其做一個(gè)探討了。
然后，這套解決方案，然后當(dāng)我們?cè)趍eta標(biāo)簽里面并沒(méi)有對(duì)viewport以及flexible兩個(gè)的任意一個(gè)進(jìn)行書(shū)寫(xiě)的時(shí)候，他也是會(huì)自動(dòng)獲取一個(gè)dpr值的

if (!dpr && !scale) {
    var isAndroid = window.navigator.appVersion.match(/android/gi);
    var isIPhone = window.navigator.appVersion.match(/iphone/gi);、
    //devicePixelRatio這個(gè)屬性是可以獲取到設(shè)備的dpr的
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
    // iOS下，對(duì)于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 {
    // 其他設(shè)備下，仍舊使用1倍的方案
    dpr = 1;
    }
    scale = 1 / dpr;
}
這里我們可以看到，手機(jī)淘寶并沒(méi)有對(duì)安卓的dpr進(jìn)行一個(gè)適配，原因之后再講。
然后到了這里，我們獲取到了我們需要的dpr值，并根據(jù)dpr值獲取到了我們所需要的縮放值（即scale）
然后我們要做的，就是在并沒(méi)有viewport的meta標(biāo)簽對(duì)情況下自己動(dòng)態(tài)將這個(gè)標(biāo)簽寫(xiě)進(jìn)我們的header，形式是這樣的

這樣，dpr的配置，也就完成了，當(dāng)然，安卓設(shè)備并沒(méi)有對(duì)dpr進(jìn)行一個(gè)配置（上面的動(dòng)態(tài)生成就不給出js了）
文字的解決方案
由于手淘暫時(shí)并沒(méi)有對(duì)安卓做一個(gè)處理，所以，這里，只是對(duì)iphone做了一個(gè)處理
即在html上，加入了一個(gè)自定義屬性，data-dpr。

還是以750的設(shè)計(jì)稿為例（即iphone6）
假如設(shè)計(jì)稿上某a標(biāo)簽是32px，那么，我們要這么寫(xiě)
a{
    font-size: 16px
}
/*iphone6*/
[data-dpr="2"] a{
    font-size: 32px
}
/*iphone6plus*/
[data-dpr="3"] a{
    font-size: 32px
}

現(xiàn)在的一些問(wèn)題
正如我們看到的，手淘目前的方案里面，是沒(méi)有考慮到安卓dpr的問(wèn)題的。即，這套方案，只對(duì)于iphone的r屏做了一個(gè)處理，而對(duì)于安卓，并沒(méi)有做dpr的處理。我們來(lái)分析下原因吧（個(gè)人拙見(jiàn)）。
我們希望字體能夠以px來(lái)展現(xiàn)，同時(shí)，我們也希望我們的東西能對(duì)dpr做一個(gè)適配。對(duì)于ios，這自然是可行的，即采用了data-dpr的自定義屬性來(lái)調(diào)整文字。4到6寫(xiě)一套字體大小，6p寫(xiě)一套字體大小，然后在對(duì)dpr為1的屏幕寫(xiě)一套字體大小。其實(shí)這種寫(xiě)法還是很惡心，不過(guò)基于對(duì)dpr的適配，這樣寫(xiě)也算是個(gè)解決方案了。
不過(guò)同樣的解決方案到安卓就不行了，安卓的dpr有時(shí)候會(huì)很亂（比如現(xiàn)在在goole的手機(jī)測(cè)試?yán)锩婵梢钥吹?，安卓的dpr，lg的某些設(shè)備還采用了1.7那樣的奇怪dpr）。而當(dāng)1.7dpr這種不規(guī)范的數(shù)字出現(xiàn)的時(shí)候，我們就不能采用之前的解決方案了，比如
[data-dpr="1.7"] a{

font-size: 25px

}
這樣的東西是不可能去寫(xiě)的，那萬(wàn)一還有2.25，2.5之類的呢？我們都要拿去匹配么？
其實(shí)現(xiàn)在，因?yàn)槲覀兺ㄟ^(guò)devicePixelRatio可以獲取到安卓的dpr值，即可以做到對(duì)安卓設(shè)備的dpr一個(gè)匹配。但是，文字如果采用px的話，確實(shí)是很難做到匹配的。
即總結(jié)一下，就是說(shuō)，對(duì)于安卓的dpr匹配，目前來(lái)說(shuō)，是沒(méi)有什么問(wèn)題的，但是，對(duì)于dpr匹配之后的字體，那肯定是有問(wèn)題的。
常見(jiàn)的dpr下的字體，我們依然可以解決，但是不常見(jiàn)的dpr，我們確實(shí)很難做到對(duì)dpr的解決。那如何解決這些問(wèn)題呢。目前以我本人這個(gè)不太靈光的腦袋，確實(shí)也不曉得該如何進(jìn)行一個(gè)處理了，起碼做不到很好的解決。
不過(guò)，還是丟上些個(gè)人的觀點(diǎn)吧。
在之前的對(duì)dpr的判斷中，是根據(jù)了設(shè)備進(jìn)行判斷，即安卓不對(duì)dpr進(jìn)行改變，僅對(duì)ios的設(shè)備進(jìn)行改變。那么，我們其實(shí)可不可以以dpr的值來(lái)做一個(gè)處理呢？即像這樣寫(xiě)

if (!dpr && !scale) {
    //devicePixelRatio這個(gè)屬性是可以獲取到設(shè)備的dpr的
    var devicePixelRatio = win.devicePixelRatio;
    //判斷dpr是否為整數(shù)
    var isRegularDpr = devicePixelRatio.toString().match(/^[1-9]d*$/g)
    if (isRegularDpr) {
    // 對(duì)于是整數(shù)的dpr，對(duì)dpr進(jìn)行操作
     if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
        dpr = 3;
    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2;
    } else {
        dpr = 1;
    }
} else {
    // 對(duì)于其他的dpr，人采用dpr為1的方案
    dpr = 1;
    }
    scale = 1 / dpr;
}    

我們對(duì)這里做了一點(diǎn)點(diǎn)修改，即來(lái)判斷dpr是否是規(guī)則的，也就是是否是我們常見(jiàn)的1，2，3等，然后，我們只對(duì)規(guī)則的dpr，來(lái)進(jìn)行一個(gè)字體的處理。這樣，iphone依然還是用之前的匹配方案。而其實(shí)目前安卓，很多的設(shè)備還是比較常見(jiàn)的dpr了，所以我們這里，將之前對(duì)設(shè)備的判斷，轉(zhuǎn)變成對(duì)dpr是否是整數(shù)的一個(gè)判斷。其他地方不變，可以解決對(duì)安卓dpr的部分匹配。
同樣，開(kāi)發(fā)的時(shí)候，如果并不在乎字體的問(wèn)題的話，大可以直接使用rem。那樣是可以做到dpr和文字都適配的問(wèn)題。不過(guò)正如我們講到字體的時(shí)候所說(shuō)的，使用rem是很多用戶不希望的（大屏機(jī)還是和小屏機(jī)看到一樣多的內(nèi)容），同時(shí)，還有點(diǎn)陣的問(wèn)題。

手機(jī)淘寶的flexible設(shè)計(jì)與實(shí)現(xiàn)

iphone6plus很有趣的地方

iphone6plus照理來(lái)說(shuō)的，其實(shí)際dpr是2.87左右的，不過(guò)，為了方便開(kāi)發(fā)者來(lái)開(kāi)發(fā)，iphone6plus對(duì)其做了一個(gè)調(diào)整，將dpr調(diào)整為3，然后在對(duì)屏幕進(jìn)行了一個(gè)縮放。這樣做，自然是方便了開(kāi)發(fā)者前去開(kāi)發(fā)，然而，這樣做，也有了一些性能上的損失。（iphone為開(kāi)發(fā)者考慮的還是挺周全的，看看隔壁安卓，dpr怎么爽怎么來(lái)，都特么自己玩自己的）

有意思的vh和vw

vh，vw目前還存在很大程度的兼容性問(wèn)題，所以還并沒(méi)有采用。
vh，vw有什么特點(diǎn)呢
這兩個(gè)元素分別會(huì)把屏幕上的可視高度（說(shuō)通俗點(diǎn)就是你手機(jī)屏幕那個(gè)框框頭裝起的東西），寬度，分成100份來(lái)看，比如先前我們用rem來(lái)處理的地方，我們需要在html元素下寫(xiě)上font-size: 75px,然后再在div下寫(xiě)上width:1rem。而有了vh，vw之后，我們?nèi)绱颂幚韍tml的font-size就好。
html {

font-size: 10vw;

}
這樣寫(xiě)，省去了一部js操作的步驟。