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

　　這個(gè)標(biāo)簽內(nèi)的內(nèi)容表示啥意思呢? name為viewport表示供移動(dòng)設(shè)備使用. content定義了viewport的屬性.

　　width表示移動(dòng)設(shè)設(shè)備下顯示的寬度為設(shè)備寬度(device-width)

　　height表示移動(dòng)設(shè)設(shè)備下顯示的寬度為設(shè)備寬度.

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

　　initial-scale表示設(shè)備與視口的縮放比率

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

　　上面的meta標(biāo)簽就是告訴瀏覽器, 不要在移動(dòng)端顯示的時(shí)候縮放.

　　meta viewport 是做什么用的?

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

　　怎么寫?

　　使用該meta標(biāo)簽時(shí)name為viewport代表供移動(dòng)設(shè)備使用,在content中寫屬性，用逗號(hào)隔開

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

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

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

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

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

　　· height：與 width 相對(duì)應(yīng)(很少使用)。

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

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

　　自身理解：

　　meta標(biāo)簽最大的作用就是能讓那些為pc端設(shè)計(jì)的網(wǎng)頁也能在不需要用戶手動(dòng)縮放(initial-scale=1)，不出現(xiàn)橫向滾動(dòng)條(width=device-width)的情況下，都可以完美的將頁面呈現(xiàn)給用戶。因?yàn)楝F(xiàn)在智能手機(jī)的大量普及，越來越多的網(wǎng)站都會(huì)為移動(dòng)設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)，此時(shí)必須有一個(gè)能夠完美適配移動(dòng)設(shè)備的 viewport。

上一篇

http和https區(qū)別以及哪個(gè)更安全？

下一篇

mvvm的概念、原理及實(shí)現(xiàn)