Web-viewport

手机网页宽度:

---

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

---

• 解析:

  • width:控制viewport的大小,可以指定的一个值或者特殊的值,如device-width为设备的宽度(单位为缩放为100%时的CSS的像素).
  • “height:”和width相对应,指定高度.
  • target-densitydpi: 一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度.一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多.Android Browser和WebView默认屏幕为中像素密度.
    
    • dpi_value: 指定一个具体的dpi值作为target dpi.这个值的范围必须在70~400之间
    • device-dpi: 使用设备原本的dpi作为目标dp.不会发生默认缩放.
    • high-dpi: 使用high-dpi作为目标dpi.中等像素密度和低像素密度设备相应缩小.
    • medium-dpi: 使用mdium-dpi作为目标dpi.高像素密度设备响应放大,像素密度设备相应缩小.这是默认的target density.
    • low-dpi: 使用low-dpi作为目标dpi.中等像素密度和高等像素密度设备相应放大.
    • 为了防止Android Browser和WebView根据不同像素密度对页面进行缩放,可以将viewport的target-densitydpi设置为device-dpi.设置效果,页面将不会缩放.相反,页面会根据当前屏幕的像素密度进行展示.在这种情形下,需要将viewport的width定义为与设备的width匹配,页面就可以与屏幕相适应.
    • initial-scale: 初始缩放.即页面初始缩放程度.这是一个浮点值,是页面大小的一个乘数.如:设置初始缩放值为”1.0”,Web页面在展现的时候就会以target density分辨率的1:1来展现.
    • maximum-scale: 最大缩放。即允许的最大缩放程度.这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数.如:这个值为”2.0”,页面与target size相比,最多能放大2倍.
    • user-scalable: 用户调整缩放.yes(默认值)||no(maximum-scale和minimum-scale)都将被忽略,因为根本不可能缩放.
    • 所有的缩放值都必须在0.01-10的范围之内.

• 综上所述:

  • 根据自己的实际需要采取需要的进行设置,不同设置值需要多多测试,祝您Coding愉快！

http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html
JackDan9 Thinking!