HTML中meta=「viewport」的介紹

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表明容許