現(xiàn)在隨著移動(dòng)互聯(lián)網(wǎng)的興起，很多人開始關(guān)注移動(dòng)互聯(lián)網(wǎng)，甚至有不少人覺得傳統(tǒng)PC端網(wǎng)站已經(jīng)落伍了（當(dāng)然我本人并不這么認(rèn)為）。其實(shí)接觸一個(gè)新的東西，我們就必須理解很多新的東西，當(dāng)然移動(dòng)端開發(fā)對(duì)于我們而言不是什么新鮮的東西，我只是來(lái)區(qū)別于我們傳統(tǒng)的PC端開發(fā)而已。當(dāng)然現(xiàn)在的移動(dòng)開發(fā)，我們就會(huì)想到HTML5，而在解決方案上我們會(huì)考慮不同設(shè)備的適配問(wèn)題。關(guān)于這點(diǎn)，我想不得不跟大家一起來(lái)回顧viewport這個(gè)屬性。

而實(shí)際上viewport是meta標(biāo)簽中的一個(gè)屬性之一，據(jù)資料說(shuō)是Apple（當(dāng)然我也不確定是不是）發(fā)明的。這個(gè)屬性除非做真正意義上的移動(dòng)網(wǎng)頁(yè)，實(shí)際上有時(shí)候也可以“不務(wù)正業(yè)”地做其他的事情，當(dāng)然原來(lái)還是它的“本分工作”，這里只留個(gè)我個(gè)人的觀點(diǎn)，后面如果有時(shí)間的話就分享下我的理解。下面就是這個(gè)屬性的基本語(yǔ)法了：

?<meta name="viewport" content=
" height = [pixel_value | device-height] ,
 width = [pixel_value | device-width ] ,
 initial-scale = float_value ,
 minimum-scale = float_value ,
 maximum-scale = float_value ,
 user-scalable = [yes | no] ,
 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]"
/>

其實(shí)看到這個(gè)語(yǔ)法規(guī)則，基本上也能夠知道各個(gè)具體的屬性及屬性值的意義了，當(dāng)然我們接下來(lái)也可以分別闡述一下各個(gè)具體的屬性及屬性值的意義。

1、尺寸：height和width

這個(gè)很容易理解，就跟我們css中的模盒的尺寸一樣，都是指高度和寬度；而值只有兩種情況，一直device-width和device-height分別是自動(dòng)識(shí)別設(shè)備的屏幕寬度和高度。而另外的則是具體的、固定的尺寸，當(dāng)然這里是以px為單位，比如320px。實(shí)例：

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=320px" />

2、屏幕像素密度：

target-densitydpi 這個(gè)屬性似乎很多文章和資料中都不提到他，當(dāng)然這里因?yàn)槲抑肋€有這么一個(gè)屬性，所以分享在這里了，也算是對(duì)很多文章的一個(gè)補(bǔ)充吧。一個(gè)屏幕像素密度是由屏幕分辨率決定的，通常定義為每英寸點(diǎn)的數(shù)量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個(gè)低像素密度的屏幕每英寸上的像素點(diǎn)更少，而一個(gè)高像素密度的屏幕每英寸上的像素點(diǎn)更多。Android 瀏覽器和WebView默認(rèn)屏幕為中像素密度。它具體的參數(shù)如下：

device-dpi –使用設(shè)備原本的 dpi 作為目標(biāo) dp。 不會(huì)發(fā)生默認(rèn)縮放。

high-dpi – 使用hdpi 作為目標(biāo) dpi。 中等像素密度和低像素密度設(shè)備相應(yīng)縮小。

medium-dpi – 使用mdpi作為目標(biāo) dpi。 高像素密度設(shè)備相應(yīng)放大， 像素密度設(shè)備相應(yīng)縮小。 這是默認(rèn)的target density。

low-dpi -使用mdpi作為目標(biāo) dpi。中等像素密度和高像素密度設(shè)備相應(yīng)放大。

value– 指定一個(gè)具體的dpi 值作為target dpi. 這個(gè)值的范圍必須在70–400之間。

這些其實(shí)非常好理解，跟我們css一樣的，比如我們?cè)赾ss中的字體粗細(xì)的屬性font-weight一樣，有bold、bolder、normal、inherit等“標(biāo)準(zhǔn)屬性值”，也有100-900的數(shù)值，當(dāng)然除此之外還有很多類似的例子，比如color等等。實(shí)例

<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<meta name="viewport" content="target-densitydpi=100" />

當(dāng)然在這里我也在網(wǎng)上看到了有朋友分享了這個(gè)屬性的一個(gè)實(shí)際應(yīng)用案例，那就是關(guān)于解決不同屏幕縮放問(wèn)題的一個(gè)小小方案，其實(shí)就是一段話而已。

為了防止Android 瀏覽器和WebView 根據(jù)不同屏幕的像素密度對(duì)你的頁(yè)面進(jìn)行縮放，你可以將viewport的target-densitydpi 設(shè)置為 device-dpi。當(dāng)你這么做了，頁(yè)面將不會(huì)縮放。相反，頁(yè)面會(huì)根據(jù)當(dāng)前屏幕的像素密度進(jìn)行展示。在這種情形下，你還需要將viewport的width定義為與設(shè)備的width匹配，這樣你的頁(yè)面就可以和屏幕相適應(yīng)。

3、初始縮放：initial-scale

這個(gè)屬性就是用于設(shè)置初始縮放程度的。即頁(yè)面初始縮放程度。這是一個(gè)浮點(diǎn)值（通俗理解就是可以帶小數(shù)的），是頁(yè)面大小的一個(gè)乘數(shù)。例如，如果你設(shè)置初始縮放為“1.0”，那么，web頁(yè)面在展現(xiàn)的時(shí)候就會(huì)以target density分辨率的1:1來(lái)展現(xiàn)。如果你設(shè)置為“2.0”，那么這個(gè)頁(yè)面就會(huì)放大為2倍。實(shí)例：

<meta name="viewport" content="initial-scale=1" />

4、縮放限制：maximum-scale和minimum-scale

分別是只允許縮放的上限和下限，比如maximum-scale就是指最大縮放。即允許的最大縮放程度。這也是一個(gè)浮點(diǎn)值，用以指出頁(yè)面大小與屏幕大小相比的最大乘數(shù)。例如，如果你將這個(gè)值設(shè)置為“2.0”，那么這個(gè)頁(yè)面與target size相比，最多能放大2倍。minimum-scale同理。實(shí)例：

<meta name="viewport" content="maximum-scale=2.0,minimum-scale=1.0" />

5、用戶“權(quán)限”：user-scalable

用戶調(diào)整縮放。即用戶是否能改變頁(yè)面縮放程度。如果設(shè)置為yes則是允許用戶對(duì)其進(jìn)行改變，反之為no。默認(rèn)值是yes。如果你將其設(shè)置為no，那么minimum-scale 和 maximum-scale都將被忽略，因?yàn)楦静豢赡芸s放。實(shí)際上根據(jù)其他資料和實(shí)驗(yàn)屬性值為false和true以及0和1也是可以的。

最后需要說(shuō)明的是，所有的縮放值都必須在0.01–10的范圍之內(nèi)。而且似乎有的瀏覽器對(duì)其中的一些屬性值不起作用（當(dāng)然也是是我本來(lái)還理解得不夠徹底吧），具體大家可以根據(jù)參考的語(yǔ)法去實(shí)踐。