視口
視口可以理解為設備或文檔對象的邏輯尺寸。
可以縮放的瀏覽器中都具有三個視口概念，分別是 布局視口、視覺視口、理想視口。
1，布局視口 layout viewport
布局視口可以理解為文檔對象的邏輯尺寸，單位為邏輯像素（CSS像素）。
在PC端上，布局視口寬度默認等於瀏覽器窗口的寬度。而在移動端上，由於要使為PC端瀏覽器設計的網站能夠完全顯示在移動端的小屏幕里，此時的布局視口會遠大於移動設備的屏幕，就會出現滾動條。
由於歷史原因，一些移動設備的瀏覽器具有默認的布局視口寬度（單位CSS像素）：
| iPhone | ipad | AndroidSamsung | IE |
|---|---|---|---|
| 980 | 980 | 980 | 1024 |
獲取布局視口的DOM API：
<script>
console.log(document.documentElement.clientWidth)
</script>
2、理想視口 ideal viewport!
理想視口是與設備相關的，是布局視口的一個理想尺寸，只有當布局視口的尺寸等於設備屏幕的尺寸時（邏輯尺寸，即有多少個邏輯像素），才是理想視口，此時文檔對象寬度與屏幕寬度相同。
移動設備一般具有固定的DPR，即在縮放100%時，用多少個物理像素顯示一個邏輯像素，在Web開發中就是用多少個物理像素去顯示一個CSS像素。
理想視口寬度 = 移動設備橫向分辨率 / DPR
獲取理想視口的DOM API：
<script>
console.log(window.screen.width);
</script>
3、 視覺視口 visual viewport
用戶正在看到的網頁的區域。用戶可以通過縮放來查看網站的內容。如果用戶縮小網站，我們看到的網站區域將變大，此時視覺視口也變大了，同理，用戶放大網站，我們能看到的網站區域將縮小，此時視覺視口也變小了。不管用戶如何縮放，都不會影響到布局視口的寬度。
視覺視口的寬度 = 理想視口寬度 / 縮放比例
利用meta標簽控制視口
移動設備的默認布局視口往往大於理想視口，此時就會在橫向出現滾動條才能完整的容納頁面。我們需要的是將頁面的布局視口設置為理想視口，這就改輪到meta標簽出場了。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
該meta標簽的作用是讓layout viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網站有不同的要求，但讓layout viewport的寬度等於設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的布局視口默認值，也就是說會出現橫向滾動條。
meta viewport 標簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。
meta viewport 標簽只對移動端瀏覽器有效，對 PC 端瀏覽器是無效的。
在蘋果的規范中，meta viewport 有6個屬性(暫且把content中的那些東西稱為一個個屬性和值)，如下：
| 屬性名 | 取值 | 描述 |
|---|---|---|
| width | 正整數或device-width | 定義視口的寬度，單位為像素 |
| height | 正整數或device-height | 定義視口的高度，單位為像素，一般不用 |
| initial-scale | [0.0-10.0] | 定義初始縮放值 |
| minimum-scale | [0.0-10.0] | 定義放大最大比例，它必須小於或等於maximum-scale設置 |
| maximum-scale | [0.0-10.0] | 定義縮小最小比例，它必須大於或等於minimum-scale設置 |
| user-scalable | yes / no | 定義是否允許用戶手動縮放頁面，默認值 yes |
width屬性
width屬性用於設置頁面的布局視口寬度，屬性值不帶單位，默認單位為像素。
其默認值在不同瀏覽器中不同，但大多數為980。
initial-scale屬性
initial-scale屬性用於設置頁面初始的縮放比例，縮放比例為理想視口與視覺視口的比值。
width=device-width, initial-scale=1
目的：
讓我們寫的頁面在水平方向上恰好與各個設備的屏幕嚴絲合縫，需要將頁面布局視口設置為設備理想視口。
- 只設置width = device-width 蘋果移動設備橫屏時會有bug
- 只設置init-scale = 1 WP7系統IE瀏覽器橫屏會有bug
終極方案：
將meta:vp標簽的屬性值設置為width=device-width, initial-scale=1就不僅能夠將頁面的布局視口自動設置為各個移動設備的理想視口，還能夠同時兼容iphone、ipad的Safari以及WP7 IE瀏覽器的橫屏問題。