背景
當我們比較移動瀏覽器和桌面瀏覽器的時候，它們最顯而易見的不同就是屏幕尺寸。
為桌面瀏覽器所設計的網站在移動瀏覽器中顯示的內容明顯要少于在桌面瀏覽器中顯示的；不管是對其進行縮放直到文字小得無法閱讀，還是在屏幕中以合適的尺寸只顯示站點中的一小部分內容。
于是，有了兩個視口（layout viewport 和 visual viewport）的概念。
兩個視口
把layout viewport想像成為一張不會變更大小或者形狀的大圖。現在想像你有一個小一些的框架，你通過它來看這張大圖。這個小框架的周圍被不透明的材料所環繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看局部。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
<html>元素在初始情況下使用的是 layout viewport的寬度。它的寬度有多寬？每個瀏覽器都不一樣。Safari iPhone為980px，Opera為850px，Android WebKit為800px，最后IE為974px。
縮放的操作是改變visual viewport的尺寸，layout viewport的尺寸不變。兩個viewport都是以CSS像素度量的。
度量
layout viewport
document.documentElement.clientWidth/Height
visual viewport
window.innerWidth/Height
完全支持：ios，Symbian，BlackBerry
用法
一個典型的針對移動端優化的站點包含類似下面的內容：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width屬性控制視口的寬度。可以像width=600這樣設為確切的像素數，或者設為device-width這一特殊值來指代比例為100%(initial-scale=1)時屏幕寬度（screen.width）的CSS像素數值。（相應有height及device-height屬性，可能對包含基于視口高度調整大小及位置的元素的頁面有用。）
initial-scale屬性控制頁面最初加載時的縮放等級。maximum-scale、minimum-scale及user-scalable屬性控制允許用戶以怎樣的方式放大或縮小頁面。
注意
但這里有一個隱情。比如Nexus One的正規寬度是480px，但是Google的工程師們覺得當使用device-width的時候，layout viewport的寬度為480px，這有些太大了。他們把寬度縮小為三分之二，所以device-width會返回給你一個320px的寬度，就像在iPhone上一樣。
因為android有target-densitydpi的概念，默認值為medium-dpi。所以設置了width=device-width的meta所在的頁面的layout viewport的寬默認不等于screen.width。
