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

而實際上viewport是meta標簽中的一個屬性之一，據(jù)資料說是Apple（當然我也不確定是不是）發(fā)明的。這個屬性除非做真正意義上的移動網(wǎng)頁，實際上有時候也可以“不務正業(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]"
/>

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

1、尺寸：height和width

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

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

2、屏幕像素密度：

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

device-dpi –使用設備原本的 dpi 作為目標 dp。 不會發(fā)生默認縮放。

high-dpi – 使用hdpi 作為目標 dpi。 中等像素密度和低像素密度設備相應縮小。

medium-dpi – 使用mdpi作為目標 dpi。 高像素密度設備相應放大， 像素密度設備相應縮小。 這是默認的target density。

low-dpi -使用mdpi作為目標 dpi。中等像素密度和高像素密度設備相應放大。

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

這些其實非常好理解，跟我們css一樣的，比如我們在css中的字體粗細的屬性font-weight一樣，有bold、bolder、normal、inherit等“標準屬性值”，也有100-900的數(shù)值，當然除此之外還有很多類似的例子，比如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" />

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

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

3、初始縮放：initial-scale

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

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

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

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

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

5、用戶“權限”：user-scalable

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

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