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

时间：2023-01-27 15:18:31

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");

}

相关文章