viewport就是瀏覽器上用來顯示網頁的那部分區域
- layout viewport:整個網頁所占據的區域（包括可視也包括不可視的區域） 默認的
- visual viewport:網頁在瀏覽器上的可視區域（瀏覽器中能夠看見的區域）
- ideal viewport:ideal viewport是一個能完美適配移動設備的viewport（沒有固定尺寸，就是屏幕的寬度）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
layout viewport是默認的，但是由於移動設備比pc端的可視區域小，所以當頁面在移動設備上時，字體會很小或出現橫向滾動條。為解決此問題，一般會在head里加入代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*width=device-width能使所有瀏覽器當前的viewport寬度變成ideal viewport的寬度，initial-scale=1是將頁面的初始縮放值設為1。*/
用來將viewport的寬度變成ideal viewport的寬度，防止橫向滾動條出現。
- width：設置layout viewport 的寬度，為一個正整數，或字符串”width-device”
- initial-scale：設置頁面的初始縮放值，為一個數字，可以帶小數
- minimum-scale：允許用戶的最小縮放值，為一個數字，可以帶小數
- maximum-scale：允許用戶的最大縮放值，為一個數字，可以帶小數
- height ：設置layout viewport 的高度，這個屬性對我們並不重
- user-scalable：是否允許用戶進行縮放，值為”no”或”yes”, no 代表不允許，yes代表允許