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

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

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

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

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

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

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

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

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

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

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

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

多種適配方案探究

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

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

方案二：固定布局視口寬度，使用viewport進行縮放（網易、荔枝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("");
    }

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

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

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

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

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

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

動態縮放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即沒有縮放處理。

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

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

(～￣▽￣)～