摘要：當(dāng)你進(jìn)行頁面放大的時(shí)候，原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過看上去變大了，事實(shí)上這部分的的值并沒有變化，僅僅是因?yàn)檫M(jìn)行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發(fā)生變化但是值所占的屏幕分辨率的值變小了。

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

ppk認(rèn)為，有三個(gè)viewport

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

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

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

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

注意，visual viewport尺寸所對(duì)應(yīng)的并不是指屏幕區(qū)域里的物理像素，而是CSS 像素。并且它所包含的 CSS 像素的數(shù)量也是隨著用戶縮放而有所改變。

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

visual viewport就像一個(gè)框，layout viewport就像一張紙，也就是紙上有一個(gè)框，框?qū)?zhǔn)紙的哪個(gè)部分，你就能看見哪個(gè)部分（假設(shè)框外部分不可見）。你可以把框靠近或遠(yuǎn)離紙（調(diào)整縮放比例），也可以改變框的位置（調(diào)整滾輪），這些方法都可以改變visual viewport，但是layout viewport始終不變。

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

當(dāng)你進(jìn)行頁面放大的時(shí)候，原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過viewport看上去變大了，事實(shí)上這部分的css的px值并沒有變化，僅僅是因?yàn)檫M(jìn)行放大后，css的1px的值所占的屏幕分辨率的值變大了。同理，當(dāng)你縮小整個(gè)頁面的時(shí)候原本看起來很大的尺寸，現(xiàn)在再通過viewport看上去的時(shí)候又變小了。同理,css的1px的值并沒有發(fā)生變化,但是1px值所占的屏幕分辨率的值變小了。所以，放大的時(shí)候，css像素個(gè)數(shù)減少，visual viewport尺寸減小，縮小的時(shí)候，css像素個(gè)數(shù)增多，，visual viewport尺寸增大

現(xiàn)在我們已經(jīng)有兩個(gè)viewport了：layout viewport 和 visual viewport。但是由于原網(wǎng)頁會(huì)在我們的移動(dòng)端縮小，如果我們需要看清文字，我們往往放大才可以看清字，可是當(dāng)我們放大的時(shí)候，又沒辦法看到整個(gè)網(wǎng)頁，這時(shí)想瀏覽整個(gè)網(wǎng)頁，我們又不得不左右滑動(dòng)屏幕（橫向滾動(dòng)條）。

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

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

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

怎么設(shè)置呢？看看這段代碼：

相信有做過移動(dòng)端開發(fā)的同學(xué)都熟悉這段代碼，不管你是不是熟悉移動(dòng)端開發(fā)的原理，像我之前一樣，不懂viewport，像素是啥，但是我把這段代碼寫進(jìn)了haed標(biāo)簽里，其實(shí)就成功了一半。
沒錯(cuò)，這段代碼就是把把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度，也就是把當(dāng)前的viewport寬度設(shè)置為 ideal viewport 的寬度。

我們來看看各個(gè)屬性是什么意思：

width：設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串"width-device"

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

minimum-scale：允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)

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

height：設(shè)置layout viewport 的高度，這個(gè)屬性對(duì)我們并不重要，很少使用

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

這些屬性可以同時(shí)使用，也可以多帶帶使用或混合使用，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開就行了。

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

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

initial-scale用于指定頁面的初始縮放比例，縮放是相對(duì)于 ideal viewport來進(jìn)行縮放的，因此當(dāng)initial-scale=1時(shí)，表示將layout viewport的寬度設(shè)置為 ideal viewport的寬度。

可以知道initial-scale=1 也能把當(dāng)前的viewport寬度變成 ideal viewport 的寬度，但這次輪到了windows phone 上的IE 無論是豎屏還是橫屏都把寬度設(shè)為豎屏?xí)rideal viewport的寬度。

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

當(dāng)遇到這種情況時(shí)，瀏覽器會(huì)取它們兩個(gè)中較大的那個(gè)值。例如，當(dāng)width=400，ideal viewport的寬度為320時(shí)，取的是400；當(dāng)width=400， ideal viewport的寬度為480時(shí)，取的是ideal viewport的寬度。

可以看到第二段代碼我們把minimum-scale=1, maximum-scale=1這兩個(gè)屬性去掉了，但效果是一樣的，因?yàn)樘砑恿藆ser-scalable=no 那么，minimum-scale=1, maximum-scale=1這兩個(gè)屬性就沒必要追加了。因?yàn)槟愣家呀?jīng)禁止了用戶縮放頁面了，允許的縮放范圍也就不存在了。

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

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

針對(duì)某個(gè)設(shè)備的ideal viewport而做出的網(wǎng)站，在其他設(shè)備上的表現(xiàn)也不會(huì)相差非常多甚至是表現(xiàn)一樣的，這是因?yàn)槭袌?chǎng)上雖然有不同分辨率，不同型號(hào)的手機(jī)，但是他們的ideal viewport是十分接近的。

ideal viewport會(huì)隨設(shè)備轉(zhuǎn)向而改變。如Iphone 5s 尺寸為320*568。在豎屏模式下寬度為320px，而在橫屏模式下寬度為568px。

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

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