摘要：隨著移動端的發(fā)展，在手機(jī)上看電腦端的頁面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動端適配第一次使用的方案。

不知不覺做前端已經(jīng)兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應(yīng)用(手機(jī)廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發(fā)展對于大前端發(fā)展是喜聞樂見的，這次的快應(yīng)用的手機(jī)廠商們?yōu)槠溟_放了應(yīng)用入口和系統(tǒng)推廣引流入口。這些新能力為前端開發(fā)者們帶來更強(qiáng)的作戰(zhàn)能力。

我們在開發(fā)PC站時經(jīng)常在瀏覽器兼容問題上耗費巨大的時間，到了移動端，面對webkit內(nèi)核的Safari與Chrome會舒心很多。but，我們要對于市面上的手機(jī)各式各樣的分辨率進(jìn)行適配，剛接觸移動端開發(fā)的時候是不是有點猝不及防哈哈，尤其是去年年中以前老版本的微信內(nèi)置瀏覽器用的X5內(nèi)核，給網(wǎng)友們戲稱移動端IE...

今天的主題是講的是我對移動端多終端適配的解決方案和移動端適配的有關(guān)布局的知識總結(jié)，下面正式開始。

首先要了解的重要的基礎(chǔ)知識點：物理像素，設(shè)備獨立像素，設(shè)備像素比，css像素，布局視口，可視視口,理想視口以及css單位rem。

物理像素（設(shè)備像素）
屏幕的物理像素，又被稱為設(shè)備像素。任何設(shè)備屏幕的物理像素出廠時就確定了，是固定不變的。
設(shè)備獨立像素
設(shè)備獨立像素也可以理解為CSS像素，可以認(rèn)為是計算機(jī)坐標(biāo)系統(tǒng)中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)。
設(shè)備像素比
設(shè)備像素比簡稱為dpr，dpr = 物理像素 / 設(shè)備獨立像素。(以iphone6為例: dpr = 750 / 375 , 所以它的像素密度比為2，即 1個CSS像素 跨越了 2個物理像素)，我們可以通多 window.devicePixelRatio 來獲取設(shè)備的像素密度，像素密度大于1就是高清屏。
CSS像素
在CSS、JS中使用的一個長度單位，單位px。
注：在pc端1物理像素等于1px，但是移動端1物理像素不一定等于1px(高清屏)。

布局視口（layout viewport
可以看作是html元素的上一級容器即頂級容器，默認(rèn)情況或者將html元素的width屬性設(shè)為100%時，會占滿這個頂級容器，此時用 document.documentElement.clientWidth 獲取到html元素的布局寬度也就是布局視口的寬度，使用媒體查詢時 max-width 和 min-width 的值指的也是布局視口的寬。
在html中一般在meta中的name為viewport字段就是控制的布局視口。布局視口一般都是瀏覽器廠商給的一個值。在手機(jī)互聯(lián)網(wǎng)沒有普及前，網(wǎng)絡(luò)上絕大部分頁面都是為電腦端瀏覽而做的，根本沒有做移動端的適配。
隨著移動端的發(fā)展，在手機(jī)上看電腦端的頁面已成為非常普及現(xiàn)象。而電腦端頁面寬度較大，移動端寬度有限，要想看到整個網(wǎng)頁，會有很長的滾動條，看起來非常麻煩。于是瀏覽器廠商為了讓用戶在小屏幕下網(wǎng)頁也能夠顯示地很好，所以把布局視口設(shè)置的很大，一般在768px ~ 1024px 之間，最常用的寬度就是 980。
這樣用戶就能看到絕大部分內(nèi)容，并根據(jù)具體內(nèi)容選擇縮放。
故布局視口是看不見的，瀏覽器廠商設(shè)置的一個固定值，如980px，并將980px的內(nèi)容縮放到手機(jī)屏內(nèi)。一塊手機(jī)屏幕，物理像素的數(shù)量是固定不變的。
視覺視口的大小是繼承自布局視口的大小，視覺視口和布局視口的寬度為CSS的px數(shù)(可變的)。

理想視口
布局視口雖然解決了移動端查看pc端網(wǎng)頁的問題，但是完全忽略了手機(jī)本身的尺寸。所以蘋果引入了理想視口，它對設(shè)備來說是最理想的布局視口，用戶不需要對頁面進(jìn)行縮放就能完美的顯示整個頁面。最簡單的做法就是使布局視口寬度設(shè)置為手機(jī)屏幕的寬度。移動端到底怎么適配不同的屏幕呢？最簡單的方法是設(shè)置如下視口：

復(fù)習(xí)一下： dpr = 物理像素 / 設(shè)備獨立像素。
以iphone6為例，iphone6的物理像素為750，如果沒有設(shè)置布局視口時，布局視口viewport默認(rèn)為980px
此時：dpr = 750 / 980 = 0.76531，等于1個CSS像素有0.76531個物理像素。接近于1像素密度所以pc端的頁面在手機(jī)端看時不會太小。
當(dāng)在meta中設(shè)置了如下配置時:

相當(dāng)于把布局視口設(shè)置為設(shè)備的寬度(即設(shè)備獨立像素)，
iphone6的設(shè)備獨立像素為 375px。
此時：dpr = 750 / 375 = 2，等于1個CSS像素有2個物理像素。此時把pc端的尺寸拿來手機(jī)端看時字體和元素會特別大只。

現(xiàn)在移動端設(shè)計稿都是基于iphone設(shè)計的，一般為750px或640px，對應(yīng)的是iphone6和iphone5的物理像素。在設(shè)計稿中，1px像素邊框?qū)?yīng)的是1物理像素。而在iphone5和iphone6中，當(dāng)布局視口width=device-width時，css的1px顯示出來的是2個物理像素，所以用戶看到的是2px的邊框。怎么解決呢？1px邊框效果其實有很多hack方法，其中一種就是通過縮放viewport。

viewport縮放
initial-scale是對布局視口進(jìn)行縮放，initial-scale是相對于理想視口的，即initial-scale=1與width=device-width是一樣的效果。initial-scale=0.5等效于width= 2倍的 device-width，所以設(shè)置initial-scale和width都可以改變布局視口的大小。
對于可視視口的縮放可以理解為，用戶用雙指對頁面進(jìn)行縮放，當(dāng)用戶縮小頁面時，可視視口變大用戶可以看到的東西越多，當(dāng)用戶放大頁面時，可視視口
變小，用戶看到的東西越少。
對于iphone6當(dāng)添加如上設(shè)置后，initial-scale=0.5時。
布局視口： 375px * 2 = 750px;
所以此時布局視口為750px，此時1px等于1物理像素了。(移動端一像素有很多hack寫法比如用偽類實現(xiàn)，svg實現(xiàn)等等)
看到這是不是覺得要消化的知識點有點多，不怕，休息一下消化消化，每個人都是這樣過來的。猥瑣發(fā)育~

多種適配方案探究

當(dāng)設(shè)計師給出ui圖時，面對市場上各式各樣的手機(jī)它們屏幕大小不同，dpr不同，屏幕尺寸也是各種大小，那么我們應(yīng)該怎么做到對ui設(shè)計圖的充分還原，使得項目在各式各樣的手機(jī)里運行呢？為了解決這種情況出現(xiàn)了許多的適配方案，各方案的實現(xiàn)方法不一樣，還原程度也不一樣，下面來總結(jié)一下常見的幾種適配方案及其原理。
方案一：固定高度，使其寬度自適應(yīng)
這也是我接觸移動端適配第一次使用的方案。
這個方案使用了理想視口,使得布局視口等于設(shè)備寬度。

在布局方面縱向使用固定px值,橫向使用自適應(yīng)布局(百分比，felx，小額定值)。
這種方案相對簡單，ui還原度比較低。

方案二：固定布局視口寬度，使用viewport進(jìn)行縮放（網(wǎng)易、荔枝FM）

    if(/Android (d+.d+)/.test(navigator.userAgent)){
        var version = parseFloat(RegExp.$1);
        if(version>2.3){
            var phoneScale = parseInt(window.screen.width)/640;
            if(/MZ-M571C/.test(navigator.userAgent)){
                document.write("");
            }else if(/M571C/.test(navigator.userAgent)&&/LizhiFM/.test(navigator.userAgent)){
                document.write("");
            }else{
                document.write("");
            }
        }else{
            document.write("");
        }
    }else{
        document.write("");
    }

固定布局視口，寬度設(shè)置固定的值，總寬度為640px，根據(jù)屏幕寬度動態(tài)生成viewport。（設(shè)計稿寬度為640px）
這種布局方案頁面寬度始終為640px通過設(shè)置縮放比例scale實現(xiàn)適配:
var scale = window.screen.width / 640;
當(dāng)設(shè)計稿為640px時，我們可以直接用1：1px來寫像素單位。這種布局方案中的1px不一定等于1px，當(dāng)設(shè)備為iphone6時
1px(css) = window.screen.widthdpr = 640 = 375 2 / 640 = 1.171875(設(shè)備物理像素)
荔枝FM這種適配方案用到了target-densitydpi ， 這是一個將被拋棄的屬性，因此不推薦使用這套方案(學(xué)習(xí)一下思路也不錯)

方案三：根據(jù)不同屏幕動態(tài)寫入font-size，以rem作為寬度單位，固定布局視口。(網(wǎng)易新聞)
首先設(shè)置理想視口:

接下來計算 html 元素的 font-size,將可視視口的寬度乘以一個系數(shù):

理論上這個系數(shù)可以是任意值，假設(shè)將這個系數(shù)取 1，則 html 元素的 font-size 即1 rem等于可視視口的寬度，此時以 rem 為單位的長度 n rem 就可以理解為 n 倍可視視口的長，這個系數(shù)取 0.01 時，1 rem 等于可視視口寬的 1/100，也就等于布局視口寬的 1/100，也就等于 1vw。實際使用過程中這個系數(shù)的選擇盡可能方便將設(shè)計稿長度數(shù)值換算為css中的長度數(shù)值
網(wǎng)易新聞手機(jī)網(wǎng)易網(wǎng)選擇的系數(shù)為 100 / 750，這個系數(shù)可以如下推出：
750px 是設(shè)計稿的寬度（以iphone6的物理像素數(shù)為標(biāo)準(zhǔn)），100是期望的換算比例，即設(shè)計稿中 100px 的長度對應(yīng)css中 1rem，將設(shè)計稿中的長度數(shù)值除以 100 得到的就是以 rem 為單位的 css 長度的數(shù)值，設(shè)計稿的寬換算為以 rem 為單位的 css 長度應(yīng)為 (750/100) rem，同時設(shè)計稿的寬對應(yīng)可視視口的寬，即有 (750/100) rem = 可視視口寬，1 rem = 可視視口寬 * (100/750)，(100/750)就是我們要的系數(shù)
在頁面初始化時設(shè)置一下 html 元素的 font-size:
在750寬的設(shè)計稿：document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
在640寬的設(shè)計稿：document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
這套方案能百分比還原設(shè)計稿。

方案四：根據(jù)不同屏幕動態(tài)寫入font-size和viewport，以rem作為寬度單位.
將屏幕分為固定的塊數(shù)10：

var width = document.documentElement.clientWidth;   // 屏幕的布局視口寬度
var rem = width / 10;                               // 將布局視口分為10份
這樣在任何屏幕下，總長度都為10rem。1rem對應(yīng)的值也不固定，與屏幕的布局視口寬度有關(guān)。

動態(tài)縮放view:

var devicePixelRatio = window.devicePixelRatio;
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
var dpr,scale;
if (isIPhone) {
  if (devicePixelRatio >=3) {
    dpr = 3;
  } else if (devicePixelRatio >=2) {
    dpr = 2;
  } else {
    dpr = 1;
  }
} else {
  dpr = 1;
}
scale = 1 / dpr;

淘寶只對iphone做了縮放處理，對于android所有dpr=1，scale=1即沒有縮放處理。

此方案與方案三相似，增進(jìn)了viewport縮放使得在iphone上1px(css) = 1px(物理像素)，這套方案能百分比還原設(shè)計稿。
Flexible實現(xiàn)手淘H5頁面的終端適配
方案五：
可以來看看我總結(jié)的 ： 大漠老師最新的vw移動端適配方案

最后看到這里相信大家心里都有個底，知道選擇哪一種方案更能適配自己所開發(fā)的項目

(～￣▽￣)～