一、概念
移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那塊區域。
二、layout viewport、visual viewport以及ideal viewport
1、layout viewport
為了讓移動端瀏覽器能夠將網頁中的內容全部顯示出來，瀏覽器會將viewport設置為一個比較寬的值。這個是移動設備默認的viewport。
2、visual Viewport
這個值可以理解為瀏覽器可視區域的大小。
3、ideal viewport
能夠完美適配移動設備的Viewport，不會因為設備的分辨率的不同而展示出來的大小不同。
三、利用meta標簽對Viewport進行控制
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
width
設置layout viewport 的寬度，為一個正整數，或字符串"device-width"
initial-scale
設置頁面的初始縮放值，為一個數字，可以帶小數
minimum-scale
允許用戶的最小縮放值，為一個數字，可以帶小數
maximum-scale
允許用戶的最大縮放值，為一個數字，可以帶小數
height
設置layout viewport 的高度，這個屬性對我們并不重要，很少使用
user-scalable
是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
注、device-width代表當前設備的寬度
四、總結
每個移動設備瀏覽器中都有一個理想的寬度，這個理想的寬度是指css中的寬度，跟設備的物理寬度沒有關系，在css中，這個寬度就相當于100%的所代表的那個寬度。我們可以用meta標簽把viewport的寬度設為那個理想的寬度，如果不知道這個設備的理想寬度是多少，那么用device-width這個特殊值就行了，同時initial-scale=1也有把viewport的寬度設為理想寬度的作用。所以，我們可以使用上面meta標簽來得到一個理想的viewport。
