關於移動端適配

關於移動端適配，網上已經有不少文章了，這篇文章主要是整理總結一下本身的理解，若有問題，歡迎指出。

1、概念

在瞭解移動端適配時，有幾個概念常常出如今移動端適配文章中，這個須要知道的。

一、設備像素（device pixels）

設備像素能夠理解爲設備屏幕的大小，它是屏幕的屬性而非瀏覽器的，不管用戶是縮小或放大網頁，它的大小始終不會改變，能夠經過screen.width/height獲取。

二、CSS像素（CSS pixels）

CSS像素是咱們開發更關注的一個抽象的概念，它是一個相對的設備像素單位。

其實能夠理解爲咱們常說的手機分辨率。

在標準的設備上，設備像素與CSS像素的比值（設備像素比）爲1:1，表示1pxCSS像素對應1px設備像素；在Retina屏上，當設備像素比爲2時，1pxCSS像素對應4px(2*2)設備像素；當設備像素比爲3時，1pxCSS像素對應9px(3*3)設備像素。

默認狀況下，CSS像素佔比取決於設備像素比，但當頁面縮小放大時，會影響CSS像素佔的空間；假設當前1個CSS像素等於1個物理像素：

瀏覽器此時的寬度爲800px，頁面時同時有一個400px寬的塊級元素容器，此時塊狀容器佔頁面的一半。

若是咱們放大頁面，放大爲200%，即原來的兩倍，此時塊狀容器則橫向佔滿了整個瀏覽器。

咱們並無跳轉瀏覽器窗口的大小，也沒有改變塊狀元素的CSS寬度，但它看起來卻變大了一倍，這是由於咱們把CSS像素方法爲了原來的兩倍。此時的1個CSS像素等於了2個設備像素

三、設備獨立像素DIP（Device independent pixels）

設備獨立像素，也稱邏輯像素，它其實就是CSS像素，即：

CSS像素 = 設備獨立像素 = 邏輯像素

四、設備像素比DPR（Device pixels ratio）

設備像素比（dpr）是指在移動開發中1個CSS像素佔用多少設備像素，它描述的是物理像素與CSS像素的初始比值關係，如2表明1個CSS像素用2 * 2個設備像素來繪製。
設備像素比能夠經過window.devicePixelRatio獲取

五、兩個視口：佈局視口（Layout Viewport）與可視視口（Visual Viewport）

George Cummins explains the basic concept besthereat Stack Overflow:

Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

上面這段話解析得很是清晰，將內容視爲一張大圖，佈局視口是包含整個大圖得內容，而可視視口只是用戶能夠看到得一部分，在手機上，它的大小就是屏幕的大小。
佈局視口能夠經過document.documentElement.clientWidth與-Height獲取
可視視口能夠經過window.innerWidth/Height獲取

五、理想視口（Ideal Viewport）

除了佈局視口、可視視口，還有第三種視口：理想視口（ideal viewport），它的出現是由於在移動端，默認視口是佈局視口，它可能比可視視口大，這樣頁面就會出現滾動條，用戶閱讀的時候可能須要縮放。而理想視口是指完美適配移動端設備，不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容，且不管在什麼設備上顯示的文字的大小是合適，也包括圖片。
理想視口其實就是等於可視視口，即設備屏幕大小。

六、媒體查詢

width/height是用佈局視口做爲參考，以CSS像素衡量
device-width/height是用設備屏幕做爲參考，以設備像素衡量

在開發移動端項目時，常常會在html頭部見到這麼一個標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

它主要是將當前的viewport設置爲屏幕的大小，同時不容許用戶縮放。它一共有6個屬性：

屬性	解釋
width	設置佈局視口的寬度，能夠設置爲device-width表示設備寬度
initial-scale	設置頁面初始縮放值與佈局視口寬度
minimum-scale	設置用戶可縮放的最小值
maximum-scale	設置用戶可縮放的最大值
height	設置佈局視口的高度，不過基本上不會須要用到
user-scalable	設置是否容許用戶縮放，no(不容許)／yes(容許)

單獨設置width=device-width或initial-scale=1均可以將佈局視口設置等於屏幕大小，即理想視口，設置初始縮放能達到一樣的效果是由於它是相對於理想視口縮放的；雖然單獨使用它們任何一個均可以達到一樣的效果，但這二者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，統統以豎屏的ideal viewport寬度爲準。因此，最完美的寫法應該是，二者都寫上去，這樣就 initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病。

若是同時設置這兩個屬性而width等於其餘值，好比400時，initial-scale=1，這種狀況瀏覽器會取值比較大的一個。

關於縮放與initial-scale的初始值（有些兼容問題，細節可查看參考連接3：8.4.1），這裏只是做爲了解，縮放是相對於理想視口縮放的，initial-scale=2時其實是將1px變得跟原來的2px的長度同樣了，因此若是設備的寬度爲320px，設置了initial-scale=2不會變成640px，而是160px。能夠獲得如下公式：

visual viewport寬度 = ideal viewport寬度 / 當前縮放值
當前縮放值 = ideal viewport寬度 / visual viewport寬度

因爲各瀏覽器默認的layout viewport寬度通常都是980、102四、800等等，沒有一開始就是ideal viewport的寬度的，因此initial-scale的默認值確定不是1。

2、移動端適配：rem

rem是相對於html的font-size的單位。
咱們使用rem適配一般有以下幾個步驟：
一、寫樣式都是按照設計稿去寫的，一般設計稿的寬度是750px，此時若咱們設置基數爲100（即html的font-size爲100px），這時1rem表示100px；
二、而在咱們的頁面中，咱們一般會經過視口的寬度去設置html的font-size，此時若咱們設置爲50px，這時1rem表示50px
100px變50px，很好理解，這就已經實現將750px的設計稿縮放在寬度爲375px設備上了；當咱們針對不一樣設備的不一樣寬度去設置html的font-size時，就很好的適配了移動端。

總結，經過viewport的meta標籤將可視視口的寬度設置爲設備像素的寬度即屏幕大小，保證頁面無橫向滾動條，利用rem，將寬爲750px的設計稿縮放在不一樣寬度的設備上。

參考連接：
一、https://www.quirksmode.org/mo...
二、https://www.quirksmode.org/mo...
三、https://github.com/jawil/blog...