摘要：做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和之間的關(guān)系產(chǎn)生疑問(wèn)也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加會(huì)不會(huì)出問(wèn)題針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。

做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問(wèn),也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒(méi)有加dpr會(huì)不會(huì)出問(wèn)題,針對(duì)這些疑問(wèn)我說(shuō)一下我的見(jiàn)解。

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

點(diǎn)這里可以看到淘寶方案具體的代碼[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);
    // 動(dòng)態(tài)設(shè)置的縮放大小會(huì)影響布局視口的尺寸
      function resize() {
      var deviceWidth  = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 10) +"px";
         }
    resize();
    window.onresize = resize;
  })()

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

這是按照640px設(shè)計(jì)規(guī)范,設(shè)計(jì)圖上標(biāo)注200px元素大小,可以看出布局視口放大了3倍,然后再整體縮放到設(shè)備屏幕大小,由于這里是證明這個(gè)過(guò)程其實(shí)與dpr無(wú)關(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è)計(jì)圖的比例畫(huà)出元素
這里要注意兩點(diǎn),因?yàn)槲沂怯胏hrome模擬的,設(shè)置的時(shí)候發(fā)現(xiàn)幾個(gè)問(wèn)題

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

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

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

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

200px : 640px => xrem : 10rem

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

x= 10 * 200 / 640 = 3.125rem

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

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

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

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

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

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

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

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

特別對(duì)于安卓手機(jī),各種神奇的dpr,如果每個(gè)都這樣設(shè)置將會(huì)是災(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下，對(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;

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

去除了邊界處理和兼容處理，由于沒(méi)有動(dò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)易方案沒(méi)有引入dpr相關(guān)的,這也說(shuō)明了移動(dòng)端自適應(yīng)與dpr是無(wú)關(guān)的

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

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

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

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

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

2.直接定死布局視口

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


  
元素大小200px

不用rem單位,不用設(shè)置js,但是布局視口定死后,就不能用css媒體查詢做響應(yīng)式了,從這里也可以看出viewport屬性的作用,就是讓布局視口通過(guò)縮放來(lái)適配屏幕寬度,width=device.width僅僅是讓布局視口初始大小等于設(shè)備寬度,后面設(shè)置的initial-scale是用來(lái)縮放布局視口大小,而且默認(rèn)是布局視口初始大小等于設(shè)備寬度,也就是所謂的理想視口,換個(gè)說(shuō)法就是如果你設(shè)置了initial-scale你可以不用設(shè)置 width=device.width了,淘寶方案你把width=device.width去掉,并不會(huì)影響自適應(yīng)過(guò)程,加上主要是防止一些不按規(guī)范的瀏覽器出現(xiàn)兼容問(wè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)的資料 分享手淘過(guò)年項(xiàng)目中采用到的前端技術(shù)

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

參考文章：

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