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

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

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

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

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

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

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

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

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

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

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

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

多種適配方案探究

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

在布局方面縱向使用固定px值,橫向使用自適應(yīng)布局(百分比，felx，小額定值)。
這種方案相對(duì)簡(jiǎn)單，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ù)屏幕寬度動(dòng)態(tài)生成viewport。（設(shè)計(jì)稿寬度為640px）
這種布局方案頁(yè)面寬度始終為640px通過(guò)設(shè)置縮放比例scale實(shí)現(xiàn)適配:
var scale = window.screen.width / 640;
當(dāng)設(shè)計(jì)稿為640px時(shí)，我們可以直接用1：1px來(lái)寫像素單位。這種布局方案中的1px不一定等于1px，當(dāng)設(shè)備為iphone6時(shí)
1px(css) = window.screen.widthdpr = 640 = 375 2 / 640 = 1.171875(設(shè)備物理像素)
荔枝FM這種適配方案用到了target-densitydpi ， 這是一個(gè)將被拋棄的屬性，因此不推薦使用這套方案(學(xué)習(xí)一下思路也不錯(cuò))

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

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

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

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

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

動(dòng)態(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;

淘寶只對(duì)iphone做了縮放處理，對(duì)于android所有dpr=1，scale=1即沒(méi)有縮放處理。

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

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

(～￣▽￣)～