近期把做好的ipad HTML5混合应用适配到android上，发现android的webview比 iPad差太多了，android4.4因为升级到chromium。和chrome内核一致，全部问题不多，但android4.3下面的版本号兼容问题太多了，仅仅能一个一个慢慢攻克了！
眼下已经碰到了css3 flex box布局的兼容问题， js的兼容问题等。
- Android的 css3 flex box须要这样写
.frame-page {
display: -moz-box; /* Firefox */
display: -ms-flexbox; /* IE10 */
display: -webkit-box; /* Safari */
display: -webkit-flex; /* Chrome, WebKit */
display: box;
display: flexbox;
display: flex;
width: 100%;
height: 100%;
flex-flow: row;
background-color: #136185; }
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi,width=device-width">
以下部分资源来自于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>中
-
<span style="font-size: x-small;"> <head>
-
<title>Exmaple</title>
-
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
-
</head></span>
meta中viewport的属性例如以下
-
<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种分辨率）
-
<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 {
-
<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);
-
}
-
}
-
<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中查询设备密度的方法
-
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>标签
WebView不包含导航栏。地址栏等完整浏览器功能，仅仅用于显示一个网页
在WebView中载入Web页面，使用loadUrl()
注意在manifest文件里增加訪问互联网的权限：
-
<uses-permission android:name="android.permission.INTERNET" />
在Android中点击一个链接。默认是调用应用程序来启动。因此WebView须要代为处理这个动作 通过WebViewClient
-
-
webView.setWebViewClient(new WebViewClient(){
-
public boolean shouldOverrideUrlLoading(WebView view, String url) {
-
view.loadUrl(url);
-
return true;
-
}
-
public void onPageFinished(WebView view, String url) {
-
super.onPageFinished(view, url);
-
}
-
public void onPageStarted(WebView view, String url, Bitmap favicon) {
-
super.onPageStarted(view, url, favicon);
-
}
-
});
这个WebViewClient对象是能够自己扩展的。比如
-
private class MyWebViewClient extends WebViewClient {
-
public boolean shouldOverrideUrlLoading(WebView view, String url) {
-
if (Uri.parse(url).getHost().equals("www.example.com")) {
-
return false;
-
}
-
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
-
startActivity(intent);
-
return true;
-
}
-
}
之后：
-
WebView myWebView = (WebView) findViewById(R.id.webview);
-
myWebView.setWebViewClient(new MyWebViewClient());
另外出于用户习惯上的考虑 须要将WebView表现得更像一个浏览器。也就是须要能够回退历史记录
因此须要覆盖系统的回退键 goBack。goForward可向前向后浏览历史页面
-
public boolean onKeyDown(int keyCode, KeyEvent event) {
-
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {
-
myWebView.goBack();
-
return true;
-
}
-
return super.onKeyDown(keyCode, event);
-
}
后面的内容在中篇中继续
