摘要：當你進行頁面放大的時候，原本在未縮放的頁面上看起來很小的尺寸，現在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發生變化但是值所占的屏幕分辨率的值變小了。

通過上一篇我們已經大概明白viewport是什么，但是viewport并沒有那么簡單，一包研究得身心疲憊，腦子一個不夠用哈哈，讓我們一起看看吧！

ppk認為，有三個viewport

我們先回想一下，當有一個為PC端設計的網頁想要放在移動端瀏覽的時候，如果我們以瀏覽器的可視窗口作為viewport，那由于移動端的屏幕很小，所以這個網頁必然會因為viewport太小而擠在一起導致無法正常顯示網頁，甚至布局會亂掉。所以這些瀏覽器就決定默認情況下把viewport設為一個較寬的值，如iphone把viewport設為980px，通過這個viewport移動端的瀏覽器就可以把整個網頁顯示在手機屏幕上，但是整個網頁是被縮小的。ppk把這個瀏覽器默認的viewport叫做 layout viewport,我們看一下這張圖就明白了。

我們可以通過
document.documentElement.clientWidth來獲得布局視窗的寬和高。

然而，layout viewport 的寬度是大于瀏覽器可視區域的寬度的，所以我們還需要一個viewport來代表 瀏覽器可視區域的大小，ppk把這個viewport叫做 visual viewport。如圖：

用window.innerWidth/Height或者document.documentElement.offsetWidth計算visual viewport的寬度

注意，visual viewport尺寸所對應的并不是指屏幕區域里的物理像素，而是CSS 像素。并且它所包含的 CSS 像素的數量也是隨著用戶縮放而有所改變。

當進行縮放（如果你放大，屏幕上的CSS像素會變少）的時候，visual viewport(就是頁面當前顯示在屏幕上的部分)的尺寸會發生變化，layout viewport的尺寸仍然跟之前的一樣。

visual viewport就像一個框，layout viewport就像一張紙，也就是紙上有一個框，框對準紙的哪個部分，你就能看見哪個部分（假設框外部分不可見）。你可以把框靠近或遠離紙（調整縮放比例），也可以改變框的位置（調整滾輪），這些方法都可以改變visual viewport，但是layout viewport始終不變。

visual viewport用css像素來衡量尺寸，表示有多少個css像素能夠被用戶看到。

當你進行頁面放大的時候，原本在未縮放的頁面上看起來很小的尺寸，現在通過viewport看上去變大了，事實上這部分的css的px值并沒有變化，僅僅是因為進行放大后，css的1px的值所占的屏幕分辨率的值變大了。同理，當你縮小整個頁面的時候原本看起來很大的尺寸，現在再通過viewport看上去的時候又變小了。同理,css的1px的值并沒有發生變化,但是1px值所占的屏幕分辨率的值變小了。所以，放大的時候，css像素個數減少，visual viewport尺寸減小，縮小的時候，css像素個數增多，，visual viewport尺寸增大

現在我們已經有兩個viewport了：layout viewport 和 visual viewport。但是由于原網頁會在我們的移動端縮小，如果我們需要看清文字，我們往往放大才可以看清字，可是當我們放大的時候，又沒辦法看到整個網頁，這時想瀏覽整個網頁，我們又不得不左右滑動屏幕（橫向滾動條）。

于是我們必須還要有一個能完美適配移動設備的viewport，所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動條就能正常的查看網站的所有內容，另外顯示的文字的大小是合適，比如一段14px大小的文字，不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。當然，不只是文字，其他元素像圖片什么的也是這個道理。ppk把這個viewport叫做 ideal viewport，也就是第三個viewport——移動設備的理想viewport。

ideal viewport并沒有一個固定的尺寸，不同的設備擁有有不同的ideal viewport。所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度。但是安卓設備就比較復雜了，有320px的，有360px的，有384px的等等。

總結一下：ppk把移動設備上的viewport分為layout viewport  、 visual viewport   和 ideal viewport  三類，其中的ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等于移動設備的屏幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那么這個元素的寬度就是設備屏幕的寬度了，也就是寬度為100%的效果。從另一角度看，idea viewport其實就是改變了尺寸layout viewport，idae viewport其實就是把layoutviewport調整到一個合適的，理想的狀態，使頁面在移動端有最佳的顯示效果，即無論在何種分辨率的屏幕下，那些針對ideal viewport 而設計的網站，不需要用戶手動縮放，也不需要橫向滾動條就可以完美地呈現給用戶。那么如何把layout viewport調整到idea viewport呢，下面我們來看一下：

怎么設置呢？看看這段代碼：

相信有做過移動端開發的同學都熟悉這段代碼，不管你是不是熟悉移動端開發的原理，像我之前一樣，不懂viewport，像素是啥，但是我把這段代碼寫進了haed標簽里，其實就成功了一半。
沒錯，這段代碼就是把把默認的layout viewport的寬度設為移動設備的屏幕寬度，也就是把當前的viewport寬度設置為 ideal viewport 的寬度。

我們來看看各個屬性是什么意思：

width：設置layout viewport 的寬度，為一個正整數，或字符串"width-device"

initial-scale：設置頁面的初始縮放值，為一個數字，可以帶小數

minimum-scale：允許用戶的最小縮放值，為一個數字，可以帶小數

maximum-scale：允許用戶的最大縮放值，為一個數字，可以帶小數

height：設置layout viewport 的高度，這個屬性對我們并不重要，很少使用

user-scalable：是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許

這些屬性可以同時使用，也可以多帶帶使用或混合使用，多個屬性同時使用時用逗號隔開就行了。

width屬性被用來控制layout viewport（布局視口）的寬度，layout viewport（布局視口）寬度默認值是設備廠家指定的。iOS, Android基本都將這個視口分辨率設置為 980px。我們可以 width=320 這樣設為確切的像素數，也可以設為device-width這一特殊值，一般為了自適應布局，普遍的做法是將width設置為device-width，width=device-width 也就是將layout viewport（布局視口）的寬度設置 ideal viewport（理想視口）的寬度。

可以看到通過width=device-width，所有瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iphone和ipad上，無論是豎屏還是橫屏，寬度都是豎屏時ideal viewport的寬度。

initial-scale用于指定頁面的初始縮放比例，縮放是相對于 ideal viewport來進行縮放的，因此當initial-scale=1時，表示將layout viewport的寬度設置為 ideal viewport的寬度。

可以知道initial-scale=1 也能把當前的viewport寬度變成 ideal viewport 的寬度，但這次輪到了windows phone 上的IE 無論是豎屏還是橫屏都把寬度設為豎屏時ideal viewport的寬度。

綜上，要把當前的viewport寬度設為ideal viewport的寬度，既可以設置 width=device-width，也可以設置 initial-scale=1，但這兩者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，通通以豎屏的ideal viewport寬度為準。所以，最完美的寫法應該是，兩者都寫上去，這樣就 initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病。

當遇到這種情況時，瀏覽器會取它們兩個中較大的那個值。例如，當width=400，ideal viewport的寬度為320時，取的是400；當width=400， ideal viewport的寬度為480時，取的是ideal viewport的寬度。

可以看到第二段代碼我們把minimum-scale=1, maximum-scale=1這兩個屬性去掉了，但效果是一樣的，因為添加了user-scalable=no 那么，minimum-scale=1, maximum-scale=1這兩個屬性就沒必要追加了。因為你都已經禁止了用戶縮放頁面了，允許的縮放范圍也就不存在了。

所有的scale指令都是相對于ideal viewport的。無視layout viewport設置了多少，所以maximum-scale=3意味著最大的縮放值是ideal viewport的300%

layout viewport能被設置成ideal viewport。width=device-width和initial-scale=1指令可以做到。

針對某個設備的ideal viewport而做出的網站，在其他設備上的表現也不會相差非常多甚至是表現一樣的，這是因為市場上雖然有不同分辨率，不同型號的手機，但是他們的ideal viewport是十分接近的。

ideal viewport會隨設備轉向而改變。如Iphone 5s 尺寸為320*568。在豎屏模式下寬度為320px，而在橫屏模式下寬度為568px。

https://www.cnblogs.com/2050/...
http://yunkus.com/meta-viewpo...
https://blog.csdn.net/as11720...

（寫到這里要吐血了哈哈）