(HTML5程序设计及实践)第10章HTML5手机应用开发.ppt

谢 谢 Thanks for listening. 第10章 HTML5 手机应用开发 目录 HTML5移动Web应用开发概述 Viewport 背景图片的处理 图片适配 调用相机 地理位置定位 HTML5 移动Web应用开发概述 手机上网已经成为最重要的上网方式（截至2015年12月，中国网民规模已达9.05亿） Android和IOS智能手机快速发展，手机浏览器功能不断完善，对HTML5的支持度甚至超过PC端浏览器。 HTML5开发Web应用摆脱APP对平台的依赖，Write once, run anywhere? 避免APP Store的审核周期 降低开发成本 资源调用限制，推送服务无法实现。 手机应用架构 三种手机应用：HTML5、Native App以及HTML5+Native。 HTML5就是指纯Web的移动应用，用户使用浏览器访问应用。 Native指的是原生APP，在Android和IOS分别开发。 Native+HTML5是一种加壳的方式，将HTML5用和浏览器封装起来，这对用户是不可见的，和Store上下载的App没有什么两样。 viewport Viewport用于手机屏幕适配 width：页面宽度，可以指定的一个具体的值或者特殊的值，device-width表示与设备屏幕同宽； height：同width，表示页面高度，通常不对其进行设置； initial-scale：页面初始缩放比例，取值范围：0.01-10； minimum-scale：页面最小缩放比例，取值范围：0.01-10； maximum-scale：页面最大缩放比例，取值范围：0.01-10； user-scalable：是否允许用户进行缩放，若为no，minimum-scale和maximum-scale都将无效。 meta name=viewport content= width = [pixel_value | device-width ] , height = [pixel_value | device-height] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] / viewport示例 !doctype html html head meta charset=utf-8 meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no titleviewport属性演示/title /head body style=margin:0px; background-color:#ededed h2 离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。 远芳侵古道，晴翠接荒城。又送王孙去，萋萋满别情。 /h2 /body /html 背景图片的处理 Web页面中添加的背景图片默认会以平铺的方式显示，因手机屏幕大小不一，会直接影响页面显示效果。 背景图片的处理 默认效果代码 !doctype html html head meta charset=utf-8 meta name=viewport content=width=device-width,initial-scale=1, user-scalable=no title背景图片的处理/title style type=text/css #box { background-image: url(top_bg.png); color: #FFF; height: 3em; line-height: 3em; text-align: center; font-weight: bold; font-size: 20px; } /style /head body style=margin:0px; background-color:#ededed div id=boxHTML5 移动开发/div /body /html 背景图片的处理 处理过的效果代码 图片适配 !doctype html html head meta charset=utf-8 meta name=viewport