利用HTML5开发Android札记（上篇）
日期：2014-05-17 浏览次数：21003 次
?
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础
学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇
（上）包括Android设备多分辨率的问题，Android中构建HTML5应用程序基础
（中）包括Android与JS之间的互动，Android处理JS的警告对话框等，Android中的调试
（下）包括本地储存在Android中的应用，地理位置的应用，离线应用的构建
—————————————————————————————— 分割线 ————————————————————————————————————————
进入正题
● Android设备多分辨率的问题
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式：1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的<meta>中
?
<head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head>
?
meta中viewport的属性如下
?
<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]
"
/>
?
? 2 CSS控制设备密度 为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率） ? ? 在一个样式表中，指定不同的样式 ? ? ? 3 JS控制 Android浏览器和WebView支持查询当前设别密度的DOM特性 window.devicePixelRatio 同样值有3个（0.75,1,1.5对应3种分辨率） JS中查询设备密度的方法
<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" />
#header {
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);
}
}
?
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
?
if (window.devicePixelRatio == 1.5) {
alert("Th
