如何利用html5开发android界面

H5开发安卓界面需要注意以下三点：
（上）包括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的中
html代码：





meta中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种分辨率）
html代码：




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");
}
Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个标签
WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页。

单纯的使用HTML5只能通过给Android应用添加webview控件来实现，其实质是在APP上嵌入一个网页浏览框来浏览html文件，如果想彻底的通过网页前端技术去开发Android界面，那么就应该使用react native。

React Native的出现

React Native的出现，似乎是扛起的反H5的旗子。就像当年Facebook放弃H5，全部转向Native一样。那么，React Native是否又是在吞食Native的领地呢？技术的发展，是用户风向标的导向起的作用。任何一门技术的出现，都是当时用户需求的体现。

React Native相比H5的优势

1、原生应用的用户体验

2、跨平台特性

3、开发人员单一技术栈

4、上手快，入门容易

5、社区繁荣

1 viewport属性放在HTML的中





meta中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]
"
/>

安卓有webview,跟访问网页一样，你只要写好的html5页面能够兼容各种安卓的屏幕尺寸就没问题，运行起来比原生的慢，苹果的会好些。
就是你写好页面，用客户端去调用访问你的页面就ok了。