利用HTML5开发Android(1)---Android设备多分辨率的问题

Android浏览器默认预览模式浏览会缩小页面 WebView中则会以原始大小显示

Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍

三种解决方式：1 viewport属性 2 CSS控制 3 JS控制

1 viewport属性放在HTML的<meta>中

Html代码

<SPAN style="FONT-SIZE: x-small">   
<head>    
        <title>Exmaple</title>    
        <meta name=”viewport” content=”width=device-width,user-scalable=no”/>    
</head>
</SPAN>

meta中viewport的属性如下

Html代码

<SPAN style="FONT-SIZE: x-small">   
<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]   
        "   
    />
</SPAN>

2 CSS控制设备密度

为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率）

Html代码

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />  
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />  
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

在一个样式表中，指定不同的样式

Html代码

#header {    
 <SPAN style="WHITE-SPACE: pre"></SPAN>
 background:url(medium-density-image.png);    
}   
@media screen and (-webkit-device-pixel-ratio: 1.5) {    
    // CSS for high-density screens    
    #header {    
        background:url(high-density-image.png);    
    }    
}    
@media screen and (-webkit-device-pixel-ratio: 0.75) {    
    // CSS for low-density screens    
    #header {    
        background:url(low-density-image.png);    
    }    
}

Html代码

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

3 JS控制

Android浏览器和WebView支持查询当前设别密度的DOM特性

window.devicePixelRatio 同样值有3个（0.75,1,1.5对应3种分辨率）

JS中查询设备密度的方法

Js代码

if (window.devicePixelRatio == 1.5) {   
    alert("This is a high-density screen");   
} else if (window.devicePixelRation == 0.75) {   
    alert("This is a low-density screen");   
}