新人翻譯，歡迎轉載~
英文原文地址：http://bitsofco.de/2015/respove-design-viewport/
原文例程地址：https://github.com/ireade/viewports
（可下載例程參照閱讀）git
當咱們在作響應式設計時，關注最多的是CSS的@media查詢。不能否認，@media查詢完成了不少工做，但一個網站的響應能力仍是取決於對Viewport的控制。當咱們想根據屏幕尺寸來自動變化頁面佈局時，咱們會像這樣作：github
@media screen and (min-width: 960px) {
body { background-color: green; }
}
@media screen and (max-width: 960px) and (min-width: 500px) {
body { background-color: pink; }
}
@media screen and (max-width: 500px) {
body { background-color: yellow; }
}
在瀏覽器上調整窗口大小，能夠看到網頁的響應能力是乎沒有任何問題的。web
那麼問題來了
在移動端瀏覽頁面時就出現異常了。瀏覽器
（沒有進行Viewport控制的iPhone6上的顯示效果）佈局
頁面雖然能夠看到，但不能自適應手機的屏幕。之因此會有這樣的問題，是設備尺寸和Viewport尺寸不一致致使的。爲了更好的理解這兩個尺寸之間的不一樣點，下面就簡單說說：測試
- 設備像素：這個是物理層面的像素數量，好比一臺iPhone6，是375x667像素。（注：這裏所說的設備像素有兩種類型，硬件像素和設備獨立像素，不過這個區別與此文無關）；
- CSS像素：這個是咱們在CSS使用過程當中的一個抽象的單位，它並無一個絕對的尺寸，頁面上單個CSS像素的大小徹底取決於Viewport的大小；
- Viewport：Viewport決定了頁面的像素密度。好比一個寬750px的Viewport，表示屏幕上橫向排布了750個CSS像素（Viewport在未縮放的狀況下）。
Viewport是"無關設備"的，它不知道也不關心咱們的設備到底有多大的屏幕。網站
大多數顯示器的Viewport尺寸默認在800px到1024px之間，這就解釋了爲何以前咱們的例程能夠在電腦上正常顯示而不用管當前屏幕的尺寸。ui
經過meta標籤來控制Viewport
能夠設置meta標籤中的viewport信息，以解決Viewport尺寸不匹配的問題。meta標籤的用法以下：spa
<meta name="viewport" content="key=value, key=value">
標籤內容中有6個關鍵字：scala
- width
- height
- initial-scale
- minimum-scale
- maximum-scale
- user-scalable
WIDTH
能夠用width來設置viewport的寬度，以替代那些不合適的默認寬度。咱們能夠給其設定一個固定大小，但設定成device-width更加明智一些，這樣咱們能夠兼容不一樣大小的屏幕。
<meta name="viewport" content="width=device-width">
加了這句話以後，咱們的例程看起來就正常多了。
（在iPhone6上設置width=device-width以後的顯示效果）
INITIAL-SCALE
在移動設備上，用戶有時會須要縮放頁面，當頁面縮放時，Viewport的像素尺寸也會相應的改變，但CSS尺寸不會變。
好比，在一個400px寬的Viewport中有一個元素，設定
width: 100px;，這時該元素就橫跨了1/4的屏幕。若是用戶把頁面放大到兩倍大小，這時Viewport寬度變成了200px，但元素仍然寬100個CSS像素。這時這個元素就佔了半個屏幕了。
咱們能夠經過initial-scale來設置CSS像素和Viewport像素之間的比例，一般狀況下是1:1。這個參數的設置能夠很好的解決width=device-width設置所帶來的問題。有些移動設備瀏覽器會在縱向模式時默認使用設備寬度，當切換到橫向模式時頁面顯示就會不正常。
（在沒有設置initial-scale的橫向iPhone6上的顯示效果）
如圖所示，當iPhone處於橫向模式時，咱們看到的仍是寬度小余500px時的頁面狀態。不過不要慌張，咱們能夠經過設置initial-scale爲1來解決這個問題。
<meta name="viewport" content="width=device-width, initial-scale=1">
（在設置了initial-scale的橫向iPhone6上的顯示效果）
USER-SCALABLE，MAXIMUM-SCALE以及MINIMUM-SCALE
這幾個參數用來控制頁面的縮放能力。
- Maximum-scale：這個是用戶能夠縮放頁面的最大比例。好比說設置爲1，用戶就沒法縮放頁面。假如設置爲2，用戶就能夠把頁面放大到1個CSS像素等於2個Viewport像素的大小；
- Minimum-scale：這個是用戶能夠縮放頁面的最小比例。假如設置爲2，頁面的最小比例就是原比例的兩倍，而且沒法縮小到原始比例；
- User-scalable：若是設置了
user-scalable=no，用戶將沒法對頁面進行縮放。
因爲這幾個參數限制了用戶對頁面的操做，一般不建議使用它們。
用CSS來控制Viewport
雖然如今不少人都在用viewport，但其實viewport並非HTML5標準中的正式成員。W3C目前正在研究將viewport以@viewport規則的形式加入到CSS當中，@viewport規則與viewport標籤有殊途同歸之妙，只是將用於佈局的viewport歸還給CSS，如今已經有部分開發者在嘗試@viewport了。
@viewport {
zoom: 1.0; /* same as initial-scale=1 */
width: device-width;
}
/* Vendor specific prefixes */
@-ms-viewport
@-webkit-viewport
@-moz-viewport
@-o-viewport
在@viewport正式發佈以前，仍是先繼續使用viewport標籤吧，若是有興趣的話能夠嘗試一下測試版的@viewport。
總結
爲了保證你的響應式頁面可以在移動端正常運行，把下面這句話加到你的<head>元素裏面吧~
<meta name="viewport" content="width=device-width, initial-scale=1">