聊聊viewport那些事兒

法令男發表於2018-02-24

前言

在移動端網頁開發的時候，我們的頁面將會不同於以往的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，變化的是裝置畫素的多少。