摘要：做移動端自適應(yīng)時可能很多人都對自適應(yīng)和之間的關(guān)系產(chǎn)生疑問也有一些人會疑慮比如我的自適應(yīng)方案沒有加會不會出問題針對這些疑問我說一下我的見解。

做移動端自適應(yīng)時可能很多人都對自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問,也有一些人會疑慮比如我的自適應(yīng)方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。

首先標(biāo)題說的自適應(yīng),可能自適應(yīng)在不同人眼里理解不同，特別與響應(yīng)式的關(guān)系,在這里說一下我所理解的自適應(yīng),和其與響應(yīng)式的區(qū)別。先說響應(yīng)式設(shè)計,響應(yīng)式設(shè)計表示在不同的屏幕尺寸下,都有良好的布局和內(nèi)容表現(xiàn),簡單一點的說,就是一個頁面可以適配多種不同尺寸的屏幕,而且看上去還是設(shè)計良好的。為了實現(xiàn)這個目的,可能會利用js或者css去動態(tài)改變布局的尺寸,在這個過程中會伴隨元素尺寸的改變,布局的改變,甚至?xí)言仉[藏,比如在pc端顯示的頁面轉(zhuǎn)到移動端就會這樣。而自適應(yīng)往往考慮的是另一個方面,就是希望頁面的設(shè)計與設(shè)計稿的設(shè)計比例一致,這個也是做自適應(yīng)的目的,在這個過程中針對不同的屏幕寬度元素的尺寸也會改變,但是一般不會有布局改變,和元素的隱藏,因為設(shè)計稿就這樣,我們得按設(shè)計師妹子的尺寸來寫頁面。所以按照我以上的說法,那些按照css媒體查詢寫的自適應(yīng)嚴(yán)格來說不叫自適應(yīng),因為斷點之間會造成比例誤差,而讓誤差少一點就得多插值。很明顯使用css媒體查詢并不是做自適應(yīng)的好方法,我們需要一種準(zhǔn)確的方法來做這個事,這個時候js就出來,下面將會列舉坊間流傳甚廣的淘寶方案和網(wǎng)易方案。

點這里可以看到淘寶方案具體的代碼[flexible][1]
當(dāng)然具體的代碼是做了很多的邊界處理和兼容處理的,但是核心可以濃縮為以下代碼

(function () {
    var dpr = window.devicePixelRatio;
    var meta = document.createElement("meta");
    var scale = 1 / dpr;
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, user-scalable=no, initial-scale=" + scale +
      ", maximum-scale=" + scale + ", minimum-scale=" + scale);
    document.getElementsByTagName("head")[0].appendChild(meta);
    // 動態(tài)設(shè)置的縮放大小會影響布局視口的尺寸
      function resize() {
      var deviceWidth  = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 10) +"px";
         }
    resize();
    window.onresize = resize;
  })()

這段代碼放在瀏覽器上就能做到自適應(yīng)了,他的過程是先獲取設(shè)備的dpr,所謂的dpr就是設(shè)備像素比,什么是設(shè)備像素比呢,就是單位尺寸內(nèi),設(shè)備物理像素的個數(shù)除以設(shè)備獨立像素的大小,物理像素就是手機屏幕上一個一個的發(fā)光的點,大小是固定的,獨立像素也叫做邏輯像素,css設(shè)置的像素大小就是邏輯像素,對于dpr等于2的手機屏幕,設(shè)置css寬度為1px,其實覆蓋的是2個設(shè)備物理像素。回到正題,拿到dpr后,通過動態(tài)設(shè)置meta的viewport值,進行對布局的縮放操作。這里有一個關(guān)鍵,就是設(shè)置 width=device-width和initial-scale的大小,在描述兩者的作用之前我們先要理解一個概念就是布局視口,布局視口在之前有一個別名叫做初始包含塊,而在比較早的文獻中初始包含塊也叫做畫布。理解畫布可能比理解布局視口更簡單,如果你按比例繪圖,很多時候就要參照你所用畫布的大小,比如設(shè)計師在750px畫了一個200px的正方形,如果你要在一張大小是100cm的紙上畫,你可能就要這樣計算正方形的寬度了 100cm * 200 / 750,可以看到這個計算中是沒有用到dpr,你的筆觸跨過多少個紙張分子,多少個原子根本就不影響我的繪圖比例。我們的畫畫的過程就相當(dāng)于設(shè)置css的過程,css的尺寸依賴的就是布局視口的大小,而網(wǎng)頁的布局視口大小在標(biāo)準(zhǔn)模式下可以這樣獲取 document.documentElement.clientWidth,而兩個關(guān)鍵的元素設(shè)置 width=device-width,initial-scale = scale,做的事情就是先把布局視口放大dpr倍,然后整體縮放相應(yīng)倍數(shù)以適應(yīng)設(shè)備尺寸。這個也很容易驗證在控制臺打印布局視口大小就行了

這是按照640px設(shè)計規(guī)范,設(shè)計圖上標(biāo)注200px元素大小,可以看出布局視口放大了3倍,然后再整體縮放到設(shè)備屏幕大小,由于這里是證明這個過程其實與dpr無關(guān),我現(xiàn)在把scale的大小設(shè)置為
0.1 和 0.5

var meta = document.createElement("meta");
        var scale = 0.1;
        meta.setAttribute("name", "viewport");

var meta = document.createElement("meta");
        var scale = 0.5;
        meta.setAttribute("name", "viewport");

這里可以看到就算我設(shè)置scale不等于 1 / drp 的大小也不妨礙我按設(shè)計圖的比例畫出元素
這里要注意兩點,因為我是用chrome模擬的,設(shè)置的時候發(fā)現(xiàn)幾個問題

scale的值如果小于0.1布局視口也只能放大10倍,也就是布局視口最多放大10倍

當(dāng)scale的值大于1時布局視口并不會縮小,而且布局視口不再匹配設(shè)備寬度

如果你引入了flexible.js進行測試,要注意刪除邊界條件,因為縮放影響了布局視口大小,相應(yīng)的邊界條件會觸發(fā),導(dǎo)致誤認為dpr與自適應(yīng)有關(guān)

要做到自適應(yīng)關(guān)鍵是讓元素的尺寸與布局視口綁定關(guān)系,在這里雖然布局視口放大了,但并不影響這種綁定關(guān)系,這里淘寶方案把布局視口的寬度分割了十等份,每份的大小相當(dāng)于布局寬度的十分之一,而把每份的大小分配給根元素的字體大小,元素尺寸就可以設(shè)置rem單位來與布局視口綁定關(guān)系,以200px尺寸為例,他們比例映射是這樣的

200px : 640px => xrem : 10rem

這里的10rem就是布局視口寬度,元素尺寸只要維持這個比例關(guān)系就行了,與dpr是沒有關(guān)系的

x= 10 * 200 / 640 = 3.125rem

這里的計算可能會費一點時間,也有一些插件可以輔助把px轉(zhuǎn)為rem的
但是方案是死的,人是活的,你只要把淘寶固有的十等分改一下就行了,比如設(shè)計稿是640px的
改一下

  document.documentElement.style.fontSize = (deviceWidth / 6.4) +"px";

分了6.4等份
200px : 640px => xrem : 6.4rem
x一看就知道是 2rem

流程 rem => 根元素字體大小 => 布局視口

那么為什么淘寶要引入dpr,把布局放大再縮小呢,其中一點就是這個方案可以很好地解決1px邊框的問題,對于高清屏來說設(shè)置1px像素大小,其實橫跨的是dpr個設(shè)備像素,這樣看起來線條不夠細,與設(shè)計稿就產(chǎn)生出入,而通過布局放大再縮小的方案剛好就彌補了這個問題。但是隨之而來也帶來一個問題,看上面的截圖我們看到字體大小發(fā)生了改變,在scale設(shè)置為0.1時基本就看不見了,原因是一般我們的字體大小的設(shè)置不會使用rem,而是使用px單位,這里的字體大小沒有隨布局視口的放大而增大,卻隨頁面的整體縮放而縮小了,這里就得要針對不同的dpr做響應(yīng)的處理,在淘寶的代碼中我們可以看到

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

就是通過在根元素上掛載dpr信息,然后設(shè)置相應(yīng)的css屬性例如

[data-dpr=2] div{
    font-size: 32px
}
[data-dpr=3] div{
    font-size: 48px
}

特別對于安卓手機,各種神奇的dpr,如果每個都這樣設(shè)置將會是災(zāi)難
所以淘寶非常聰明

 var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        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 {
            // 其他設(shè)備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;

夠簡單直接,安卓高清屏是不存在的, 但是其實影響也不大,就是安卓屏的1px線條粗一點而已
如果除了要做自適應(yīng)還要做響應(yīng)式,那也得像上面設(shè)置字體一樣一個一個設(shè)置,因為css媒體查詢也是針對布局視口尺寸的。對于淘寶他們來說,肯定有一套工程化的方案來解決這種技術(shù)難題,對于遇到這個坑的伙伴估計得自已想辦法了,預(yù)處理器是必不可少的。
從前面可以知道淘寶引入dpr并不是為了做自適應(yīng)的,而是為了解決1px問題的,當(dāng)然也引入了其他難題,既然如此,放棄解決1px問題,不就簡單得多,網(wǎng)易方案就是這么簡單。

去除了邊界處理和兼容處理，由于沒有動態(tài)設(shè)置meta所以要在head中引入


 


 (function () {
    var dpr = window.devicePixelRatio;
    function resize() {
      var deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = (deviceWidth / 6.4) +"px";
   }
    resize();
    window.onresize = resize;
  })()

網(wǎng)易方案沒有引入dpr相關(guān)的,這也說明了移動端自適應(yīng)與dpr是無關(guān)的

從圖片中可以看出和淘寶方案的區(qū)別,布局視口沒有放大,整個頁面也沒有縮放,但是并不影響與設(shè)計圖的比例
200px : 640px => xrem : 6.4rem
x= 2rem
流程 rem => 根元素的大小 => 布局視口

既然自適應(yīng)與dpr無關(guān)那么就可以擴展出很多方案了

1.在布局視口等于設(shè)備寬度時,直接把根元素字體大小綁定到設(shè)備寬度大小上

document.documentElement.style.fontSize = (screen.width/ 6.4) +"px";

這里有關(guān)相關(guān)的文章 基于screen.width的偽響應(yīng)式開發(fā)

2.直接定死布局視口

  
  
  //定死為設(shè)計稿的尺寸
  
  
  
  


  
元素大小200px

不用rem單位,不用設(shè)置js,但是布局視口定死后,就不能用css媒體查詢做響應(yīng)式了,從這里也可以看出viewport屬性的作用,就是讓布局視口通過縮放來適配屏幕寬度,width=device.width僅僅是讓布局視口初始大小等于設(shè)備寬度,后面設(shè)置的initial-scale是用來縮放布局視口大小,而且默認是布局視口初始大小等于設(shè)備寬度,也就是所謂的理想視口,換個說法就是如果你設(shè)置了initial-scale你可以不用設(shè)置 width=device.width了,淘寶方案你把width=device.width去掉,并不會影響自適應(yīng)過程,加上主要是防止一些不按規(guī)范的瀏覽器出現(xiàn)兼容問題。如果還不能理解viewport的作用,那么可以參考svg中的viewport和viewBox的關(guān)系，原理是一樣的。

3.使用新出單位 vm, vm 就是專門為自適應(yīng)而出現(xiàn)的,100vm就是布局視口的寬度,非常厲害,你也不用設(shè)置js了
200px: 640px => xvm : 100vm
x=200 * 100 / 640 = 31.25vm

流程 vm => 布局視口

看一下兼容性

兼容還可以,這里也有相關(guān)的資料 分享手淘過年項目中采用到的前端技術(shù)

移動端尺寸自適應(yīng)與dpr無關(guān),除了淘寶方案外,其他方案都得處理1px的問題,但也減少針對不同dpr設(shè)備做響應(yīng)式處理的麻煩,而且其中也沒有一種一勞永逸的方案能解決全部問題。而作為新出來的單位vm,是時候該入坑了

參考文章：

1. 張鑫旭 [基于screen.width的偽響應(yīng)式開發(fā)][10]
2. 大漠 [分享手淘過年項目中采用到的前端技術(shù)][11]
3. [flexible][12]
4. 張鑫旭 [設(shè)備像素比devicePixelRatio簡單介紹][13]