HTML中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
該meta標籤的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。當然maximum-scale=1.0, user-scalable=0不是必需的，是否允許用戶手動播放根據網站的需求來定，但把width設爲width-device基本是必須的，這樣能保證不會出現橫向滾動條。
meta viewport 的6個屬性：
| 屬性 | 值 |
|---|---|
| width | 設置layout viewport 的寬度，爲一個正整數，或字符串"width-device" |
| initial-scale | 設置頁面的初始縮放值，爲一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，爲一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，爲一個數字，可以帶小數 |
| height | 設置layout viewport 的高度，這個屬性並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值爲"no"或"yes", no 代表不允許，yes代表允許 |
對於這行代碼我們是不是每次都得把這五個屬性都寫上呢？答案肯定是否定的，例如：如果你添加了user-scalable=no 那麼，minimum-scale=1, maximum-scale=1這兩個屬性就沒必要追加了。因爲你都已經禁止了用戶縮放頁面了，允許的縮放範圍也就不存在了。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
上面這兩段代碼效果是一樣的，都是不允許用戶手動縮放頁面，只是在原理上有所區別。那麼現在問題來了，既然有了user-scalable=no我們也沒必要辛苦自己寫成minimum-scale=1, maximum-scale=1, user-scalable=yes。
-
3個viewport
（1）layout viewport——佈局視窗
如果把移動設備上瀏覽器的可視區域設爲viewport的話，某些網站會因爲viewport太窄而顯示錯亂，所以這些瀏覽器就默認會把viewport設爲一個較寬的值，比如980px，使得即使是那些爲PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。這個瀏覽器默認的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。
（2）visual viewport——視覺視窗
layout viewport的寬度是大於瀏覽器可視區域的寬度的，所以還需要一個viewport來代表瀏覽器可視區域的大小，這個viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。
（3）ideal viewport——理想視窗
ideal viewport是一個能完美適配移動設備的viewport。首先，不需要縮放和橫向滾動條就能正常查看網站的所有內容；其次，顯示的文字、圖片大小合適，如14px的文字不會因爲在一個高密度像素的屏幕裏顯示得太小而無法看清，無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都差不多。這個viewport叫做 ideal viewport。
ideal viewport並沒有一個固定的尺寸，不同的設備有不同的ideal viewport。例如，所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640。
ideal viewport 的意義在於，無論在何種分辨率的屏幕下，針對ideal viewport 而設計的網站，不需要縮放和橫向滾動條都可以完美地呈現給用戶。 -
viewport設置移動端自適應的方法：
<meta name="viewport" content="width=device-width, initial-scale=1">