一。分類（三種）
layout viewport ：那些為桌面設計的網站也能在移動浏覽器上正常顯示的寬度（這是浏覽器的一個預設值）
visual viewport ：浏覽器可視區域的大小
ideal viewport：能完美适配移動裝置的
viewport。即
不需要使用者縮放和橫向滾動條就能正常的檢視網站的所有内容，顯示的文字的大小是合适的。
下圖真實通俗的顯示了layout viewport和visual viewport。
PS 再次深入了解一下： 如下圖，從左向右依次是 移動端 ，viewport，網頁
網頁承載着viewport，viewport 承載着我們的浏覽器或者裝置當中
PC頁面在手機縮放原因：
1. iphon4預設的viewport 980px , user-scalable=yes
2.那麼initial-scale 在320px的浏覽器上 就是320/980 即0.33333
二。利用meta标簽對viewport進行控制---->得到
ideal viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
meta
标簽作用：讓目前
viewport
的寬度等于裝置的寬度，同時不允許使用者手動縮放。
meta viewport
中的content有6個屬性,如下：
PS：多個屬性同時使用時用逗号隔開。
三。得到
ideal viewport——>
預設的
layout viewport
的寬度 = 移動裝置的螢幕寬度
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1"> 上面兩句代碼的功能一樣，都可以可以把目前的的
viewport
變為
ideal viewport
。
**PS：深入了解縮放 ： 縮放是相對于
ideal viewport
來進行縮放的 。是以縮放值為1的時候，就得到了
ideal viewport
。
縮放值越大，目前viewport的寬度就會越小。
目前縮放值 = ideal viewport寬度 / visual viewport寬度 （安卓上的原生浏覽器以及IE有些問題）
**PS：
width
和
initial-scale=1
同時出現，且出現了沖突時，浏覽器會取它們兩個中較大的那個值。但是事情并不都是完美的，總有個别奇葩的出現，比如uc9。在uc9浏覽器中，當initial-scale=1時，無論width屬性的值為多少，此時viewport的寬度永遠都是ideal viewport的寬度。
總結 ： 把目前的viewport寬度設為ideal viewport的寬度，既可以設定 width=device-width，也可以設定 initial-scale=1，但這兩者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，通通以豎屏的ideal viewport寬度為準。
最完美的寫法應該是
<meta name="viewport" content="width=device-width, initial-scale=1"> initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病。
一個标準的移動web頁面 如下：
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0"> 四。有一個小小的注意點：
在iphone和ipad上，無論你給viewport設的寬的是多少，如果沒有指定預設的縮放值，則iphone和ipad會自動計算這個縮放值，以達到目前頁面不會出現橫向滾動條(或者說viewport的寬度就是螢幕的寬度)的目的。
五。動态改變meta viewport标簽（兩種辦法）
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">') <meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>