`

利用HTML5开发Android笔记（上篇）

HTML5Android 
阅读更多

 

资源来自于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种分辨率）

 

	<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" />
 

  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()

	WebView myWebView = (WebView) findViewById(R.id.webview);
	myWebView.loadUrl("http://www.example.com");

注意在manifest文件中加入访问互联网的权限：

	<uses-permission android:name="android.permission.INTERNET" />
 

在Android中点击一个链接，默认是调用应用程序来启动，因此WebView需要代为处理这个动作 通过WebViewClient

	//设置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);
	}

后面的内容在中篇中继续

 

 

 

2
顶
2
踩
分享到：
| Activity中创建Dialog的注意事项（改变Dial ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics