首页 > 代码库 > 利用HTML5开发Android(1)---Android设备多分辨率的问题

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

2024-07-23 15:28:18   215人阅读

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="http://www.mamicode.com/hdpi.css" />  <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="http://www.mamicode.com/mdpi.css" />  <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="http://www.mamicode.com/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");   }

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


联系
我们