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

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

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

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

(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);
    // 動態設置的縮放大小會影響布局視口的尺寸
      function resize() {
      var deviceWidth  = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 10) +"px";
         }
    resize();
    window.onresize = resize;
  })()

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

這是按照640px設計規范,設計圖上標注200px元素大小,可以看出布局視口放大了3倍,然后再整體縮放到設備屏幕大小,由于這里是證明這個過程其實與dpr無關,我現在把scale的大小設置為
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");

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

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

當scale的值大于1時布局視口并不會縮小,而且布局視口不再匹配設備寬度

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

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

200px : 640px => xrem : 10rem

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

x= 10 * 200 / 640 = 3.125rem

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

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

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

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

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

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

就是通過在根元素上掛載dpr信息,然后設置相應的css屬性例如

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

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

 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 {
            // 其他設備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;

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

去除了邊界處理和兼容處理，由于沒有動態設置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;
  })()

網易方案沒有引入dpr相關的,這也說明了移動端自適應與dpr是無關的

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

既然自適應與dpr無關那么就可以擴展出很多方案了

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

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

這里有關相關的文章 基于screen.width的偽響應式開發

2.直接定死布局視口

  
  
  //定死為設計稿的尺寸
  
  
  
  


  
元素大小200px

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

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

流程 vm => 布局視口

看一下兼容性

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

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

參考文章：

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