visual viewport和layout viewport

首先了解幾個概念:

• 物理像素：買手機的時候會有一個 n x m 的分辨率，那是屏幕的n x m個呈像的點，一個點（小方格）爲一個物理像素。它是屏幕能顯示的最小粒度.

• CSS像素：就是CSS裏的Px，上面已經講了是viewport中的一個小方格。

• 像素密度：即dpi或ppi，屏幕每英寸所佔的物理像素點。

像素密度如何去計算請戳我

本文主要是說明layout viewport和visual viewport二者的區別和在移動端上得表現。

當你在寫移動端頁面的時候，常常會看到這樣一個元素信息

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

其中name屬性聲明瞭這個meta標籤元素想要聲明的內容的名稱,content就是聲明的具體內容了。

這也是這篇文章想要探討的一些問題。

無論你是用PC端仍是移動端的瀏覽器去訪問一個頁面的時候。你所看到的瀏覽器的窗口就是你visual viewport（經過window.innerWidth/height獲取），對於移動端來講，就是你經過瀏覽器所看到的那部分大小，它的度量單位是px(css中的像素)。這個visual viewport一般是能夠變化的，例如你對屏幕進行縮放，這樣就能夠改變visual viewport的大小，或者你移動屏幕的滾輪，這樣就能夠改變visual viewport的位置。

和visual viewport相對應的另一個viewport叫layout viewport。它就至關於一個大的box，全部的內容都要在這個box裏面顯示。你經過visual viewport所看到的內容就是layout viewport上的部份內容。

visual viewport和layout viewport到底又有什麼區別和聯繫呢?

把layout viewport想像成爲一張不會變動大小或者形狀的大圖。如今想像你有一個小一些的框架，你經過它來看這張大圖。（譯者：能夠理解爲「管中窺豹」）這個小框架的周圍被不透明的材料所環繞，這掩蓋了你全部的視線，只留這張大圖的一部分給你。你經過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你能夠不用管大圖，或者你能夠靠近一些（放大）只看局部。你也能夠改變框架的方向，可是大圖（layout viewport）的大小和形狀永遠不會變。

當你進行頁面縮放的時，你能夠想象你拿着這個小框架離這張大圖愈來愈近了，那麼你所看到的大圖的內容也愈來愈少了。本來在未縮放的頁面上看起來很小的尺寸，如今經過viewport看上去變大了，事實上這部分的css的px值並無變化，僅僅是由於進行放大後，css的1px的值所佔的屏幕分辨率的值變大了。

同理，當你縮小整個頁面的時候，看到大圖的內容也愈來愈多，同時，本來看起來很大的尺寸，如今再經過viewport看上去的時候又變小了。同理,css的1px的值並無發生變化,可是1px值所佔的屏幕分辨率的值變小了。

在放大和縮小的過程當中，visual viewport和layout viewport的寬，高都沒發生任何的變化,變化的僅僅就像是用戶拿着這個visual viewport去遠離或者靠近layout viewport，在遠離或者靠近的過程當中，就會呈現出縮放的效果來。

那麼layout viewport到底有多寬呢？

初始狀態：

例如chrome下，初始layout viewport的寬度是980px，這個時候整個頁面是處於徹底縮小的狀態下，經過visual viewport是能夠看到layout viewport中的全部內容的，就好像你拿着visual viewport，離layout viewport到正好能夠看到layout viewport全部內容的距離爲止。

即在初始狀態下,沒有設置<meta name="viewport">的狀況下，layout viewport依據不一樣瀏覽器的特性，有一個初始值，並處於徹底縮小的狀態。例如 12306官網

聲明瞭< meta name="viewport">的狀態下：

當經過meta標籤申明瞭viewport的寬度

<meta name="viewport" content="width=300">

layout viewport初始化的寬度就是300px,並處於徹底適應於visual viewport的狀態。即經過visual viewport能夠看到layout viewport中全部的內容(不存在滾輪的狀況下)。

當你拿着手機屏幕進行翻轉的時候：

• 若是visual viewport 的寬度 > layout viewport 的寬度，那麼viewport須要zoom in,以適應visual viewport的寬度

• 若是visual viewport 的寬度 < layout viewport的寬度，那麼viewport須要zoom out，以適應visual viewport的寬度

<meta name="viewport" content="width:device-width">

device-width會將手機橫向物理像素/轉化系統(具體的換算見請戳我)做爲其值，並重置相應的layout viewport的值，並適應visual viewport。

此時，無論手機屏幕是否翻轉時，visual viewport 都和 layout viewport的值相同。而不會出現縮放的狀況。不過用戶是能夠經過進行縮放操做的。

若是設置

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

此時用戶不能對網頁進行縮放。

參考文章：

• 兩個viewport的故事

• 移動適配(二)

• 移動適配(一)

• 深刻了解viewport和px

• 在移動瀏覽器中使用viewport元標籤控制佈局

• Safari Web Content Guide