meta標(biāo)簽name="viewport"屬性，是專門用來針對手機(jī)移動(dòng)端的網(wǎng)頁進(jìn)行優(yōu)化而設(shè)置的，通過學(xué)習(xí)viewport的寫法和用法，能讓我們更加清楚了解，那些在PC端瀏覽器中設(shè)計(jì)的網(wǎng)站是如何在手機(jī)移動(dòng)設(shè)備上正常顯示的？
viewport定義
viewport有視窗、視區(qū)等含義，是專門為手機(jī)移動(dòng)設(shè)備設(shè)計(jì)的，當(dāng)在手機(jī)移動(dòng)設(shè)備打開網(wǎng)頁時(shí)，就會(huì)檢測網(wǎng)頁meta標(biāo)簽是否設(shè)置了viewport，如果設(shè)置了，就會(huì)按照設(shè)置viewport的要求在手機(jī)移動(dòng)設(shè)備中顯示網(wǎng)頁。
viewport有以下三種類型：
布局視區(qū)（layout viewport）是指整個(gè)網(wǎng)頁在手機(jī)移動(dòng)瀏覽器中顯示的區(qū)域，由于這個(gè)布局視區(qū)在大多數(shù)手機(jī)移動(dòng)瀏覽器中默認(rèn)顯示的寬度是980px（也有1024px，或其他寬度的），只要整個(gè)網(wǎng)頁寬度不超過980px，就能正常顯示在手機(jī)瀏覽器中，而不會(huì)因?yàn)樘粩D得錯(cuò)位；
可見視區(qū)（visual viewport），就是手機(jī)移動(dòng)設(shè)備本身的屏幕顯示區(qū)域，不同的移動(dòng)設(shè)備，可見視區(qū)尺寸也是不同的；
理想視區(qū)（ideal viewport）是指布局視區(qū)能完美適配手機(jī)移動(dòng)設(shè)備的可見視區(qū)，也就是布局視區(qū)的寬度=可見視區(qū)的寬度，這樣就不需要縮放和橫向滾動(dòng)條就能正常查看整個(gè)網(wǎng)頁內(nèi)容了；
viewport在手機(jī)移動(dòng)設(shè)備中默認(rèn)的是布局視區(qū)（layout viewport），由于手機(jī)移動(dòng)設(shè)備的可見視區(qū)寬度小于布局視區(qū)的寬度，網(wǎng)頁在沒有響應(yīng)式自適應(yīng)的話，那么，用戶在手機(jī)移動(dòng)設(shè)備的屏幕可見視區(qū)就只能看見整個(gè)網(wǎng)頁的一部分內(nèi)容，需要進(jìn)行平移或縮放才可以查看網(wǎng)頁其他部分的內(nèi)容！
viewport用法
在html頭部的<head>和</head>之間加入以下meta標(biāo)簽viewport屬性的寫法：
<meta name="viewport" content="屬性名=屬性值"> |
如果content后面有多個(gè)屬性，則屬性與屬性之間用英文逗號(hào)隔開，示范代碼如下：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> |
以上代碼表示當(dāng)前viewport的寬度是理想視區(qū)的寬度，也就是布局視區(qū)寬度等于設(shè)備的可見視區(qū)的寬度，同時(shí)不允許用戶手動(dòng)縮放。
viewport屬性
viewport屬性列表如下：
| 屬性名 | 屬性值說明 |
|---|---|
| width | 控制視區(qū)的寬度，可以指定固定寬度值；或設(shè)置為device-width； |
| height | 控制視區(qū)的高度，這個(gè)屬性一般不設(shè)置，很少使用 |
| initial-scale | 設(shè)置頁面初始化縮放值，通常設(shè)為1，可以是小數(shù) |
| maximum-scale | 允許用戶縮放的最大比例值，為一個(gè)數(shù)字，可以帶小數(shù) |
| minimum-scale | 允許用戶縮放的最小比例值，為一個(gè)數(shù)字，可以帶小數(shù) |
| user-scalable | 是否允許用戶進(jìn)行縮放, no 代表不允許，yes代表允許 |
| target-densitydpi | 只有安卓手機(jī)支持，且已開始棄用，因此，不做介紹！ |
1、width屬性：表示在手機(jī)移動(dòng)設(shè)備下顯示的布局視區(qū)的寬度，有以下幾種情況：
如果width不設(shè)置或留空，則使用默認(rèn)寬度，一般大多數(shù)手機(jī)移動(dòng)瀏覽器默認(rèn)的布局視區(qū)寬度為980px，少數(shù)也有1024px，也可以是其他值；
如果width設(shè)置寬度為device-width，則表示設(shè)置成為理想視區(qū)寬度，即布局視區(qū)寬度=可見視區(qū)寬度；
如果width設(shè)置固定寬度，單位是px，也可以不帶單位，比如width=640，因?yàn)槟J(rèn)單位也是px；
2、height屬性：這個(gè)屬性一般不設(shè)置，很少使用；
3、initial-scale屬性：設(shè)置布局視區(qū)初始化縮放比例，即每一次加載時(shí)頁面縮放的比例
如果設(shè)置initial-scale=1，則和width=device-width是一樣的，都表示設(shè)置成理想視區(qū)（ideal viewport），但兩者都有一個(gè)小缺陷，就是width=device-width會(huì)導(dǎo)致iphone、ipad橫豎屏不分，initial-scale=1會(huì)導(dǎo)致IE橫豎屏不分，最完美的寫法兩者都寫上去， initial-scale=1 解決 iphone、ipad的缺陷，width=device-width解決IE的缺陷，這樣就可以相互彌補(bǔ)缺陷。
4、maximum-scale屬性值必須大于minimum-scale屬性值；
5、user-scalable屬性：設(shè)置是否允許用戶手動(dòng)縮放布局視區(qū)，不是必須設(shè)置的屬性；
如果設(shè)置user-scalable=0，不是必需的，是否允許用戶手動(dòng)播放根據(jù)網(wǎng)站的需求來定，但把width設(shè)為width-device基本是必須的，這樣能保證不會(huì)出現(xiàn)橫向滾動(dòng)條。
