viewport的深入理解
首先我們先想一個問題，一個寬度1000px的頁面在一個邏輯像素320px的手機端上面是怎么顯示的？
首先我們從小學初中時候說起，記得以前都是諾基亞手機，一個諾基亞手機已經(jīng)很厲害了，博主那時候還沒有手機，經(jīng)常拿老媽的手機刷網(wǎng)頁版的qq空間和玩一個叫縱橫四海的游戲，那時候手機根本不能完全顯示整個網(wǎng)頁，只能顯示一小部分，通過按鈕上下左右移動位置拖動網(wǎng)頁，這樣體驗很不好，于是，瀏覽器那邊就提出了一個虛擬的viewport概念，ios的viewport一般設置成980px而android就比較多，通過這個viewport，移動端的瀏覽器就可以把整個網(wǎng)頁顯示在手機屏幕上，整個網(wǎng)頁是被縮小的，字體非常難看，需要放大，我們學校的教務系統(tǒng)用手機訪問就是這樣，需要放大才能填寫登錄信息。所以，有了viewport之后，移動web設備上是完全顯示一個1000px的頁面的。
這里移動端瀏覽器干了兩件事：
把整個頁面在980px的viewport是渲染出來，這里我們一般稱之為layout viewport
為什么需要這個980px的layout viewport來渲染頁面呢，試想一下，如果我們把一個1000px的頁面渲染在320px的手機端瀏覽器上，那么，排版就會發(fā)生錯亂，會有問題，所以才需要一個980px的viewport渲染達到正確排版。
通過縮放，把整個頁面縮小以至于瀏覽器能夠完全顯示整個網(wǎng)頁。
然而，layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個viewport來代表 瀏覽器可視區(qū)域的大小，ppk把這個viewport叫做 visual viewport（度量viewport/視口viewport）。visual viewport的寬度可以通過window.innerWidth 來獲取，但在Android 2, Oprea mini 和 UC 8中無法正確獲取。
我們可以這樣理解，把手機分為兩層，底層為layout viewport，手機瀏覽器把頁面渲染在這個viewport上，頂層為visual viewport， 我們可以通過縮放控制顯示多大的視口。
不管你是用PC端還是移動端的瀏覽器去訪問一個頁面的時候。你所看到的瀏覽器的窗口就是你visual viewport（通過window.innerWidth/height獲?。?，對于移動端來說，就是你通過瀏覽器所看到的那部分大小，它的度量單位是px(css中的像素)。這個visual viewport通常是可以變化的，例如你對屏幕進行縮放，這樣就可以改變visual viewport的大小，或者你移動屏幕的滾輪，這樣就可以改變visual viewport的位置。
而layout viewport，它就相當于一個大的box，所有的內(nèi)容都要在這個box里面顯示。你通過visual viewport所看到的內(nèi)容就是layout viewport上的部分內(nèi)容。
把layout viewport想像成為一張不會變更大小或者形狀的大圖?，F(xiàn)在想像你有一個小一些的框架，你通過它來看這張大圖。（譯者：可以理解為「管中窺豹」）這個小框架的周圍被不透明的材料所環(huán)繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮?。﹣砜凑麄€圖片的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看局部。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
當你進行頁面縮放的時，你可以想象你拿著這個小框架離這張大圖越來越近了，那么你所看到的大圖的內(nèi)容也越來越少了。原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過viewport看上去變大了，事實上這部分的css的px值并沒有變化，僅僅是因為進行放大后，css的1px的值所占的屏幕分辨率的值變大了。
同理，當你縮小整個頁面的時候，看到大圖的內(nèi)容也越來越多，同時，原本看起來很大的尺寸，現(xiàn)在再通過viewport看上去的時候又變小了。同理,css的1px的值并沒有發(fā)生變化,但是1px值所占的屏幕分辨率的值變小了。
<metaname="viewport"
content="width=device-width,?
user-scalable=no,?
initial-scale=1.0,
?maximum-scale=1.0,
?minimum-scale=1.0">
屬性
width=device-width ：表示寬度是設備屏幕的寬度
initial-scale=1.0：表示初始的縮放比例
minimum-scale=0.5：表示最小的縮放比例
maximum-scale=2.0：表示最大的縮放比例
user-scalable=yes：表示用戶是否可以調(diào)整縮放比例
。
