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

　　這個標簽內的內容表示啥意思呢? name為viewport表示供移動設備使用. content定義了viewport的屬性.

　　width表示移動設設備下顯示的寬度為設備寬度(device-width)

　　height表示移動設設備下顯示的寬度為設備寬度.

　　user-scalable表示用戶縮放能力, no表示不允許.

　　initial-scale表示設備與視口的縮放比率

　　maximum和minimum分別表示縮放的最大最小值, 要注意的是, maximum必須必minimum大.

　　上面的meta標簽就是告訴瀏覽器, 不要在移動端顯示的時候縮放.

　　meta viewport 是做什么用的?

　　meta viewport 是用于適配移動設備的，為了使不管是什么寬度的頁面都能在移動設備端得到完美適配(不需要用戶縮放和滾動橫向滾動條并且字體圖片等顯示正常)

　　怎么寫?

　　使用該meta標簽時name為viewport代表供移動設備使用,在content中寫屬性，用逗號隔開

　　· width：控制 viewport 的大小，可以給它指定一個值(正整數)，或者是一個特殊的值(如：device-width 設備獨立像素寬度，單位縮放為 1 時);

　　· initial-scale：初始縮放比例，即當頁面第一次加載時的縮放比例，為一個數字(可以帶小數);

　　· maximum-scale：允許用戶縮放到的最大比例，為一個數字(可以帶小數);

　　· minimum-scale：允許用戶縮放到的最小比例，為一個數字(可以帶小數);

　　· user-scalable：是否允許用戶手動縮放，值為 “no”(不允許) 或 “yes”(允許);

　　· height：與 width 相對應(很少使用)。

　　如果不知道設備的理想寬度就用特殊值 device-width，同時 initial-scale=1 來的到一個理想的 viewport (ideal viewport)。

　　<meta name="viewport" content="width=device-width, initial-scale=1.0> 

　　自身理解：

　　meta標簽最大的作用就是能讓那些為pc端設計的網頁也能在不需要用戶手動縮放(initial-scale=1)，不出現橫向滾動條(width=device-width)的情況下，都可以完美的將頁面呈現給用戶。因為現在智能手機的大量普及，越來越多的網站都會為移動設備進行單獨的設計，此時必須有一個能夠完美適配移動設備的 viewport。

上一篇

http和https區別以及哪個更安全？

下一篇

mvvm的概念、原理及實現