viewport原理和使用和設置移動端自適應的方法

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: viewport寬度
height: viewport高度
initial-scale: 初始縮放比例
maximum-scale: 最大縮放比例
minimum-scale: 最小縮放比例
user-scalable: 是否允許用戶縮放

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">

　　對於這行代碼我們是不是每次都得把這五個屬性都寫上呢？答案肯定是否定的，例如：如果你添加了user-scalable=no 那麽，minimum-scale=1, maximum-scale=1這兩個屬性就沒必要追加了。因為你都已經禁止了用戶縮放頁面了，允許的縮放範圍也就不存在了。

//沒必要追加minimum-scale=1, maximum-scale=1這兩個屬性了
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

　　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">

viewport原理和使用和設置移動端自適應的方法