Html5 Viewport学习

功能：

Viewport可以使我们开发出来的应用或页面大小能适合各种智能手机(Andriod,Iphone,Ipod,WinPhone等)的不同分辨率，不同屏幕大小!

语法及解释：

<meta name="viewport"

    content="

        height = [pixel_value(指定值px) | device-height(设备高度)] ,

        width = [pixel_value(指定值px)  | device-width(设备高度) ] ,

        initial-scale = float_value
(页面初始缩放程度,eg :1.0web页面在展现的时候就会以target density分辨率的1:1来展现,2.0就是放大两倍，值范围0.1~10) ,

          minimum-scale = float_value , （最小缩放。即允许的最小缩放程度。值范围0.1~10）

          maximum-scale = float_value ,  （最大缩放。即允许的最大缩放程度。值范围0.1~10）

          user-scalable = [yes | no] ,  (用户调整缩放。即用户是否能改变页面缩放程度。

  如果设置为yes则是允许用户对其进行改变，反之为no。

  默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。)

         target-densitydpi = [dpi_value(指定dpi值)| device-dpi(使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放) |
      high-dpi(使用hdpi作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。) | medium-dpi | low-dpi]  一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。

 Android支持三种屏幕像素密度：低像素密度（low-dpi），中像素密度（medium-dpi），高像素密度（hdpi）。

     一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。

     Android Browser和WebView默认屏幕为中像素密度。

     "

 />

举例应用：

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=2.0, 

user-scalable=yes,target-densitydpi=device-dpi"> 

target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。