HTML5移动网站开发实践.ppt
《HTML5移动网站开发实践.ppt》由会员分享,可在线阅读,更多相关《HTML5移动网站开发实践.ppt(63页珍藏版)》请在三一文库上搜索。
1、移动网站开发实践,2,3,4,webkit.org,5,使用HTML5 响应式设计 touch事件 兼容高分屏 硬件加速 Debugging Tips,6,7,语义化标签,使用这些标签增强语义1: header footer nav article ,New elements of HTML5,8,离线存储,使用localstorage1: 保存用户地理位置信息 缓存Javascript和CSS2,Web storage Storager case study: Bing, Google,9,访问设备,使用geolocation 1来获取用户地理位置,Geolocation API Speci
2、fications,10,图形,使用Canvas1和SVG2来绘制股票曲线,HTML Canvas 2D Context Scalable Vector Graphics (SVG) 1.1,11,CSS3,CSS31的使用很普遍: 用flexible box布局 圆角与阴影 渐变背景 border image transition,rgba 新的selector media query Base64图片2,CSS Level 3 Data URI scheme,12,浏览器兼容性, mobilehtml5.org,13,响应式(Responsive)网页设计,14,什么是响应式设计,一种能在
3、不同屏幕大小的设备上都能提供优秀的浏览体验的网页设计方案12 案例3 Twitter Bootstrap Microsoft Boston Globe,Wikipedia: Responsive Web Design A List Apart: Responsive Web Design Mediaqueri.es,15,响应式设计在手机上尤其重要,手机屏幕较小, 固定宽度不可行 如果固定宽度太大, 则需要双向滚动 如果固定宽度太小, 则不能充分利用屏幕空间 手机屏幕尺寸多样1,List of displays by pixel density,16,1. 弹性布局 flexible layo
4、ut,页面的body宽度是100% 自适应布局 使用Flexible Box1进行多栏布局 需要固定宽度的flex设置为0 需要自动伸展的flex设置为1,http:/www.w3.org/TR/css3-flexbox/,17,2. 液态图片 fluid image,文字会自动根据容器宽度换行 图片需要设定百分比宽度 img max-width: 100%; ,18,3. 媒体查询 media query,针对不同的屏幕应用不同的样式1 link rel=“stylesheet” type=“text/css” href=“m.css” media=“screen and (max-widt
5、h: 480px)” media screen and (min-width: 480px) .selector ,http:/www.w3.org/TR/css3-mediaqueries/ Media Query & Asset Downloading Results,19,4. 响应式栅格 responsive grid,根据屏幕宽度决定每行栅格数量以及每个栅格的宽度 响应式栅格系统 Bootstrap Foundation 3 responsive.gs,20,5. 响应式Javascript,使用matchMedia1 matchMedia(screen and (min-width
6、:480px).matches matchMedia browser fallback matchMedia.js 处理orientationChange事件,CSSOM View Module,21,touch事件,22,Touch事件,Touch Events,23,兼容鼠标事件,Safari Web Content Guide: Handling Events,24, delay,手机上的click事件有300ms的延迟12 解决方案: 使用touchstart / touchend代替click,Remove onClick delay on webkit for iPhone Cre
7、ating Fast Buttons for Mobile Web Applications,26,TouchEvent对象的属性,继承自UIEvent对象 有三个TouchList类型的关键属性 touches: 屏幕上所有手指 targetTouches: 当前元素上的手指 changedTouches: 有变化的手指 TouchList里的每一项结构和MouseEvent类似,MDC: TouchEvent,27,手势gesture,和touch类似,gesture有guesturestart, gesturechange和gestureend事件2 GestureEvent对象包含ro
8、tation和scale属性1 可以使用TouchEvent中的touches属性来构造自定义的手势,GestureEvent Class Reference Handling Gesture Events,28,touch相关脚本库,可以使用Javascript封装常见的tap, swipe, pinch, zoom, rotate等手势 流行的脚本库 hammer.js zepto.js jQuery mobile Sencha Touch,29,适应高分辨率屏幕,30,视网膜屏 Retina Display,31,320 x 480,640 x 960,32,物理像素,屏幕密度(Scre
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 移动 网站 开发 实践
链接地址:https://www.31doc.com/p-3078466.html