移动互联网路上的囧小子 - 凌阳教育北京总部 - 嵌入式培训 .ppt

Android应用开发新路线 利用HTML5开发Android应用程序！ Android与HTML5融合 Android的HTML5应用程序概述 如何适配多分辨率的Android设备？ 如何在Android中构建HTML5应用程序？ 如何在Android中调试HTML5应用程序？ 如何在Android中使用HTML5的本地储存？ 如何在Android中使用HTML5的本地数据库？ 如何在Android中使用HTML5的地理定位？ 如何在Android中构建HTML5离线应用？ 如何使用Canvas进行绘图？ Android HTML5应用概述 适配多分辨率的Android设备 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属性中，就可以定义多个视窗特性。包括视窗的宽度、高度、缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有逗号隔开。 head titleExmaple/title meta name=”viewport” content=”width=device-width,user-scalable=no”/ /head 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] / CSS控制设备密度 Android浏览和WebView支持CSS媒体性能（webkit-device-pixel-ratio），允许指定屏幕密度创建一些样式CSS媒体性能。该值应该是“0.75”，“1”或“1.5”，它们分别表示对于低、中、高密度屏幕的设备。 下面为每种密度创建独立的样式： 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-pix