码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2014-09-21 15:17:40      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   io   java   ar   strong   for   div   

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

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

标签:android   style   blog   io   java   ar   strong   for   div   

原文地址:http://www.cnblogs.com/lvfeilong/p/34543fgdfgfg.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!