一、什麼是viewport

viewport就是我們移動裝置螢幕上顯示網頁的那一塊區域，就是瀏覽器顯示網頁的區域。一般情況下移動裝置的viewport比瀏覽器的viewport要大。為什麼要設定meta viewport標籤呢？一般移動裝置viewport的寬度預設為980px或者是1024px，這樣就會出現橫向的滾動條。

　　　　一些移動裝置預設瀏覽器寬度

二、layout viewport、visual viewport、idea viewport

移動裝置上的三個viewport。

1.layout viewport表示瀏覽器預設的viewport。viewport的寬度可以通過document.documentElement.clientWidth

2.visua viewport表示瀏覽器可以看見的區域，viewport的寬度可以通過window.innerWidth來獲取。

3.idea viewport表示移動裝置的理想viewport。

idea viewport：使用者不需要進行縮放，滾動條，字型大小合適，圖片清晰度高。

ideaviewport的寬度等於移動裝置螢幕的寬度。

三、meta標籤viewport的屬性

<meta name="viewport" content="width=device-width, initial-scale=1.0"

, maximum-scale=1.0, user-scalable=0"
 

該<meta>表示viewport的寬度等於螢幕的寬度，使用者不允許進行縮放頁面。

設定idea viewport

<meta name="viewport" content="width=device-width>

或者

<meta name="viewport" content="initial-scale=1.0">

這裡注意：initial-scale=1.0表示沒有對頁面進行縮放，但是縮放是對idea viewport進行縮放的。

當width和initial-scale同時出現

<meta name="viewport" content="width=980, initial-scale=1.0">

　　當二者同時出現且width的值不是device-width時，瀏覽器會取兩個中值最大的那個。（例如 width=980，idea viewport的寬是1024，則瀏覽器取idea viewport的寬。相反則取width的值）。

但是以上幾種情況都會有極個別的小缺陷，就是某些移動裝置的橫屏、豎屏不分。於是就有了一種寫法。

<meta name="viewport" content="width=device-width, initial-scale=1.0">