html5_android

移动互联网路上的囧小子•姓名：杨丰盛•英文名字：yarin•网名：半灌水•门派：移动互联网^_^•现任公司：云晖软件（成都）有限公司•开发经验：J2me、Brew、Android、Iphone、HTML5•主要作品：《Android应用开发揭秘》《Android技术内幕：系统卷》•新浪微博：@杨丰盛（）•个人主页：应用程序！Android与HTML5融合•Android的HTML5应用程序概述•如何适配多分辨率的Android设备？•如何在Android中构建HTML5应用程序？•如何在Android中调试HTML5应用程序？•如何在Android中使用HTML5的本地储存？•如何在Android中使用HTML5的本地数据库？•如何在Android中使用HTML5的地理定位？•如何在Android中构建HTML5离线应用？•如何使用Canvas进行绘图？AndroidHTML5应用概述Android应用客户端应用SDK应用WEB应用浏览器应用WebView应用（browser）&（SDK+WebView）HTML5JavaScriptCSS适配多分辨率的Android设备Android设备的多分辨率？•物理分辨率•视窗大小与WEB页面比例•屏幕密度怎么办？viewport属性用CSS控制设备密度用JavaScript控制设备密度Android浏览器加载WEB页面时，如果用户没有禁止启用”预览模式“，那么将默认为“预览模式“，通常会缩小WEB页面。而当页面在WebView中显示时，会采用”完全载入“的方式，即保证WEB页面的原始大小。设备屏幕的密度是基于屏幕的分辨率（由每英寸所包含的点数（dpi））定义的。Android支持三种类别的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）。与中等密度屏幕相比，低密度屏幕每英寸像素较少，高密度屏幕每英寸像素较多。默认情况下，Android浏览器和WebView是针对中等密度的屏幕。Android浏览器和WebView在高密度屏幕上将Web页面缩放约1.5倍（因为中等密度屏幕像素较小），而在低密度屏幕上将Web页面缩放约0.75倍（因为中等密度屏幕像素大）。viewport属性的应用viewport需要放置在HTML的meta标签中，在meta标签的content属性中，就可以定义多个视窗特性。包括视窗的宽度、高度、缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有逗号隔开。headtitleExmaple/titlemetaname=”viewport”content=”width=device-width,user-scalable=no”//headmetaname=viewportcontent=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]/CSS控制设备密度Android浏览和WebView支持CSS媒体性能（webkit-device-pixel-ratio），允许指定屏幕密度创建一些样式CSS媒体性能。该值应该是“0.75”，“1”或“1.5”，它们分别表示对于低、中、高密度屏幕的设备。下面为每种密度创建独立的样式：linkrel=stylesheetmedia=screenand(-webkit-device-pixel-ratio:1.5)href=hdpi.css/linkrel=stylesheetmedia=screenand(-webkit-device-pixel-ratio:1.0)href=mdpi.css/linkrel=stylesheetmedia=screenand(-webkit-device-pixel-ratio:0.75)href=ldpi.css/在一个样式表中，指定不同样式：#header{background:url(medium-density-image.png);}@mediascreenand(-webkit-device-pixel-ratio:1.5){//CSSforhigh-densityscreens#header{background:url(high-density-image.png);}}@mediascreenand(-webkit-device-pixel-ratio:0.75){//CSSforlow-densityscreens#header{background:url(low-density-image.png);}}metaname=viewportcontent=target-densitydpi=device-dpi,width=device-width/JavaScript控制设备密度Android浏览器和WebView支持查询当前设备密度的DOM特性（window.devicePixelRatio），该值指定用于当前设备按比例缩放的系数。例如，值为“1.0”，则说明设备是中等密度，并且默认页面不进行缩放；如果该值是“1.5”，那么，设备是高密度设备，并且默认页面调整1.5x（倍）；如果该值是“0.75”，那么，设备是低密度设备，并且默认页面调整0.75x（倍）。如何使用JavaScript查询设备密度：if(window.devicePixelRatio==1.5){alert(Thisisahigh-densityscreen);}elseif(window.devicePixelRation==0.75){alert(Thisisalow-densityscreen);}在Android中构建HTML5应用程序使用WebView在Android中构建Web应用处理页面导航浏览网页历史记录Android与JavaScript交互AndroidWebView应用WebView类是AndroidView类的扩展，它允许Web页面作为Activity布局的一部分显示。它不包括完整Web浏览器的任何功能，如导航控制或地址栏。默认情况下WebView所能做的就是显示一个网页。添加WebView到应用程序中:?xmlversion=1.0encoding=utf-8?WebViewxmlns:android=:id=@+id/webviewandroid:layout_width=fill_parentandroid:layout_height=fill_parent/要在WebView中加载Web页面，使用loadUrl()WebViewmyWebView=(WebView)findViewById(R.id.webview);myWebView.loadUrl();manifest...uses-permissionandroid:name=android.permission.INTERNET/.../manifest处理页面导航在WebView中，当用户从Web页面里点击一个链接，在Android中，默认行为是启动一个应用程序来处理URL。通常，默认Web浏览器打开并加载这个目的URL。但是，您可以为您的WebView忽略此默认行为，由WebView打开所有链接。然后，通过WebView，您可以运行用户向前、向后浏览他们的Web页面的历史。privateclassMyWebViewClientextendsWebViewClient{publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){if(Uri.parse(url).getHost().equals()){returnfalse;}Intentintent=newIntent(Intent.ACTION_VIEW,Uri.parse(url));startActivity(intent);returntrue;}}WebViewmyWebView=(WebView)findViewById(R.id.webview);myWebView.setWebViewClient(newMyWebViewClient());浏览网页历史记录当WebView重写URL加载后，它会自动累计访问过Web页面的历史。你可以用goBack()和goForward()向前和向后浏览历史页面。publicbooleanonKeyDown(intkeyCode,KeyEventevent){if((keyCode==KeyEvent.KEYCODE_BACK)&&myWebView.canGoBack(){myWebView.goBack();returntrue;}returnsuper.onKeyDown(keyCode,event);}Android与JavaScript交互如果您计划使用JavaScript将Web页面加载到WebView中，您就必须为您的WebView启用JavaScript。一旦启用JavaScript，您就可以在您的应用程序与您的JavaScript代码之间建立接口。默认情况下，在WebView中，JavaScript是禁用的。您可以通过将WebSettings附加到您的WebView中来启用JavaScript。你可以用getSettings()检索WebSettings，然后用setJavaScriptEnabled()启动JavaScript。WebViewmyWebView=(WebView)findViewById(R.id.webview);WebSettingswebSettings=myWebView.getSettings();webSettings.setJavaScriptEnabled(true);Android与JS通信实例演示:在Android中处理JS的警告、对话框等；在JS中调用Android接口；在Android调用JS函数。Android中调试HTML5应用如果您正在开发一个Android的Web应用程序，您可以使用控制台（console）JavaScriptAPI调试您的JavaScript，调试消息输出到Logcat。在Android浏览器中用控制台API：Js代码：console.log(HelloWorld);Log信息：Console:HelloWorld:82Android的WebKit没有实现在其他桌面浏览器中实现的所有控制台API。但您可以使用基本的文本记录功能：console.log(String)console.info(String)console.warn(String)console.error(String)在WebView中用控制台API在调试您的WebView的Web页面时，是支持控制台API。在Android1.6和更低版本下，控制台信息自动发送到Logcat，并加以“WebCore”标签。如果您是针对Android2.1（APILevel7）或更高版本，那么你必须提供