在android中使用HTML5开发的应用.pptVIP

移动互联网路上的小子 姓名:杨丰盛 英文名字: yarIn 网名:半灌水 派:移动互联网^A 现任公司:云晖软件(成都)有限公司 开发经验:J2me、Brew、 Android、 Iphone、HTML5 主要作品:《 Android应用开发揭秘》 《 Android技术内幕:系统卷》 新浪微博:@杨丰盛(/yarin) 个人主页 Android应用开发新路线 利用HTML5开发 Android应用程序 Android与HTML5融合 Android的HTML5应用程序概述 如何适配多分辨率的 Android设备 如何在 Androidi中构建HTML5应用程序? 如何在 Android中调试HTML5应用程序? 如何在 Android中使用HTML5的本地储存 如何在 Android中使用HTML5的本地数据库? 如何在 Android中使用HTML5的地理定位? 如何在 Android中构建HTML5离线应用? 如何使用 Canvas进行绘图? Android HTMl5应用概述 Android应用 客户端应用 B应用 SDK应用 浏览器应用 WebView应用 000 browser ) SDK+Web View Andro HTML Javascrip CSS viewport 适配多分辨率的 Android设备 Android设备的多分辨率? Android浏览器加载WEB页面时,如 物理分辨率 认为“预览模式“,通常 在WebⅥew中显示时,会采用”完全载入“的方式,即保证WEB 视窗大小与WEB页面比例 页面的原始大 屏幕密度 WebView在高密度屏幕上将Web页面缩放约1.5倍(因为中 等密度屏像素大) viewport属性 用CSs控制设备密度 用 JavaScript控制设备密度 viewport属性的应用 ◆ viewport需要放置在HTML的meta标签中,在meta标签的 content属性中,就可以定义多个视窗特性。包括视窗的宽度、高度、 缩放比例,目标设备密度等,但是,需要注意每个视窗属性必须有 逗号隔开。 tleExmaple/tit t content=width=device-width user-scalabl target-densi tydpi ueI device-dpi I high-dpiI medi um-dpi ow-dpi I 回画国国 CSS控制设备密度 ◆ Android浏览和webⅥew支持CSS媒体性能( webkit-device-pixe ratio),允许指定屏幕密度创建一些样式cSS媒体性能。该值应该是 75,1或“1.5,它们分别表示对于低、中、高密度屏幕的设备 下面为每种密度创建独立的样式 在一个样式表中,指定不同样式 #header I y-image. png) webk- pixel-ratio: 1.5 kground: url(h y-image. png) @media screen and (-webkit-device-pixel-ratio: 0.75) age. png smeta name=viewport contenttarget-densitydpi-device-dpir width=device- JavaScript控制设备密度 ◆ Android浏览器和 Web View支持查询当前设备密度的DOM特性 ( window. device PixeIRatio),该值指定用于当前设备按比例 缩放的系数。例如,值为 则说明设备是中等密度,并且 默认页面不进行缩放;如果该值是“1.5”,那么,设备是高密度 设备,并且默认页面调整1.5X(倍);如果该值是“0.75”,那 么,设备是低密度设备,并且默认页面调整0.75X(倍 如何使用 Java Scrip查询设备密度 ePixelrat I else if (window. devicepixelRation a low-density screen 在 Android中构建HTML5应用程序 使用 Webview在 Android中构建Web应用 处理页面导航 览网页历史记录 Android与 JavaScript交互 Android webview应用 Webview类是 Android view类的扩展,它允许Web页面作为Acty布局 的部分显示。它不包括完整Web浏览器的任何功能,如导航控制或地 址栏。默认情况下 Webview所能做的就是显示一个网页 添加 Web view到应用程序中 ?xml version=1.0 encoding=utf-8? webViewxmlns:android=thttp://schemas.androidc