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

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

?<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]"
/>

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

1、尺寸：height和width

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

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

2、屏幕像素密度：

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

device-dpi –使用設(shè)備原本的 dpi 作為目標(biāo) dp。 不會發(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– 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。

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

<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)上看到了有朋友分享了這個屬性的一個實際應(yīng)用案例，那就是關(guān)于解決不同屏幕縮放問題的一個小小方案，其實就是一段話而已。

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

3、初始縮放：initial-scale

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

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

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

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

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

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

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

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