聊聊viewport那些事兒

前言

在移動端網頁開發的時候，咱們的頁面將會不一樣於以往的PC網頁的開發，由於PC網頁的屏幕遠遠大於手機屏幕上的網頁，咱們在瀏覽器上開啓手機調試模式的話，看到的效果會呈現出一個縮小的效果，因此咱們通常都會製做一個可以適配於小屏幕手機的網站出來，供手機用戶瀏覽。
可是對於viewport的概念可能還不太瞭解，下面我來說講我對viewport的理解

viewport

有時候被稱爲包含塊或視口，能夠認爲他是html標籤的上級元素，html標籤會默認等同於他的寬度。

在PC端瀏覽器上的視口寬度是與瀏覽器內部的寬度是保持一致的，可是移動端瀏覽器的狀況會不同，介於各類設備的分辨率大小、以及瀏覽器的特性、供應商的要求等等方面，它們的視口大小可能會不同。

一些蘋果的手機設備會默認使用980px的視口大小，這就意味着你的網頁在蘋果手機上顯示的效果，將會跟980px的pc下顯示沒有任何差異，只不過是縮小的而已。

(上圖分別以iphone6和PC顯示爲例)

網頁在手機設備上顯示都會自動適應該手機設備的佈局視口的寬度，由於有個默認的縮放比例，正好讓980px縮放到375px（iphone6）的大小，這就是他能徹底展現在手機屏幕上的緣由。 這時候的頁面會呈現的很擠壓，可是卻能讓980px的東西展現在手機上，這就牽扯到三個視口的概念，分別是：佈局視口(layout viewport)，視覺視口(visual viewport)，理想視口(ideal viewport)

上面陳述的980px的大小實際上是來自於佈局視口。

咱們透過手機屏幕看到的那部分區域——視覺視口

爲了容納手機這個較小的顯示區域，視覺視口會默認等同於佈局視口，可是手機屏幕遠遠達不到980px的寬度，因此在手機上會呈現"縮小"的狀態，這樣可以儘量的徹底渲染出來全部的頁面內容，在使用手機調試模式看的時候能夠發現這一點。

這時候視覺視口能夠經過放大縮小來看到網頁的不一樣角落，可是體驗性是不好的。 甚至若是頁面寬度過大會出現橫向滾動條。

如何作到理想地展現網頁的大小，那就須要搬出——理想視口。

理想視口（ideal viewport），其實就是手機屏幕的大小，將佈局視口設置成理想視口，頁面就可以適應到合適的尺寸，用戶就再也不須要本身去縮放和拖動網頁了。 利用如下代碼能夠達到這一點：

<meta name="viewport" content="width=device-width"/>
複製代碼

這裏的width設置就是佈局視口的寬度，device-width表明着理想視口的寬度。

能夠看到980px的視口如今變成了320px。

這個屬性仍是有其餘成員的：

width 設置的佈局視口的寬度
initial-scale 設置初始縮放比例和佈局視口的寬度
minimun-scale 設置最小縮放比例
maximum-scale 設置最大縮放比例
height 設置佈局視口的高度，可是好像沒有做用
user-scalable 是否容許用戶縮放 no爲不容許
複製代碼

咱們一般看到的代碼都是家庭總動員：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
複製代碼

可是其中的意義仍是比較含混，比如如這個 "initial-scale=1.0"，爲何須要縮放1倍？

這個初始縮放比例實際上是相對於理想視口的，也就是僅僅使用這樣的代碼就能夠達成理想視口：

<meta name="viewport" content="initial-scale=1.0">
複製代碼

這段話的意義是將佈局視口設置成1倍於理想視口。

那爲何須要多寫一遍，緣由在於兼容性的問題

咱們從上表能夠得知，蘋果產品是沒有徹底支持width的，相反IE也不徹底支持initial-scale，因此爲了達成全部瀏覽器都能兼容的目的，必要地須要去作這樣操做。

initial-scale：先前說到這是相對與理想視口的寬度，就是說若是咱們在375px上的屏幕上使用0.5的縮放的話視覺視口就是160px了，是嗎？

並非，如今在視口的大小是：750

緣由是原先的1個CSS像素寬能表示2個設備像素寬,如今只能表示1個了（1/2）,這時候像素會增多，展現的內容也會增多，因此像素會比原先多了一倍，內容看上去也會小不少

這裏有個專門的公式可以告訴你如今的視口是多大：

視覺視口寬度=理想的視口寬度/縮放因子 
複製代碼

(上圖是用1倍的縮放比例，下圖是用2倍的縮放比例)

這裏說的CSS像素和設備像素是什麼？

設備像素和CSS像素 這裏講到的像素指的分別是咱們手機屏幕上看到的物理像素 以及 咱們在CSS中使用的像素，他們不是等同的概念.

正常而論，在PC端上是1個設備像素對應1個CSS像素，但在移動端上不少時候其實他們都不是 1：1的關係的。

而能影響CSS像素與設備像素的對應關係的就是：縮放比例和DPR（設備像素和CSS像素的比值，即設備像素比）。
複製代碼

爲何說1個CSS像素寬表示2個設備像素寬？

這是隨着時代的變遷帶來的結果，市面上的手機不斷在更新換代，屏幕的分辨率也在步步攀升，做爲手機市場的領頭羊——蘋果，首先推出了retina屏幕，這時候的dpr=2，像素的密度比以前高了一倍，這樣能呈現更清晰、更細膩的效果，本來的1個CSS像素這時候對應的是2倍的設備像素，但其實CSS像素是沒有變化的，100px仍然是100px，變化的是設備像素的多少。

PDR爲2的狀況下像素的對應關係，一個CSS像素寬等於2個設備像素寬，因此一個CSS像素表明着4個設備像素(寬高總和)。

而咱們在使用0.5縮放比例的時候，呈現的效果如圖示是這樣的：

好了 以上是我的結合其餘大神理解得來的 還請各位大神不要見笑~ 懇求指正學習~

參考文章：

PPK教程
博客園
簡書
div.io
知乎
HcySunYang