Web-viewport

浅浅的花香味﹌ 2022-07-16 01:45 129阅读 0赞

# 手机网页宽度: #

--------------------

--------------------

*  **解析:**
    
     *  **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][http_www.php100.com_html_webkaifa_HTML5_2012_0831_10979.html]  
> JackDan9 Thinking!

[http_www.php100.com_html_webkaifa_HTML5_2012_0831_10979.html]: http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html