HTML5移动网站开发实践-课件（PPT-精）.ppt

移动网站开发实践 赵文博 使用HTML5 响应式设计 touch事件 兼容高分屏 硬件加速 Debugging Tips 语义化标签 使用这些标签增强语义[1]: header footer nav article … New elements of HTML5 离线存储 使用localstorage[1]: 保存用户地理位置信息 缓存Javascript和CSS[2] Web storage Storager case study: Bing, Google 访问设备 使用geolocation [1]来获取用户地理位置 Geolocation API Specifications 图形 使用Canvas[1]和SVG[2]来绘制股票曲线 HTML Canvas 2D Context Scalable Vector Graphics (SVG) 1.1 CSS3 CSS3[1]的使用很普遍: 用flexible box布局 圆角与阴影 渐变背景 border image transition rgba 新的selector media query Base64图片[2] CSS Level 3 Data URI scheme 浏览器兼容性 响应式(Responsive)网页设计 什么是响应式设计 一种能在不同屏幕大小的设备上都能提供优秀的浏览体验的网页设计方案[1][2] 案例[3] Twitter Bootstrap Microsoft Boston Globe Wikipedia: Responsive Web Design A List Apart: Responsive Web Design Mediaqueri.es 响应式设计在手机上尤其重要 手机屏幕较小, 固定宽度不可行 如果固定宽度太大, 则需要双向滚动 如果固定宽度太小, 则不能充分利用屏幕空间 手机屏幕尺寸多样[1] List of displays by pixel density 1. 弹性布局 flexible layout 页面的body宽度是100% 自适应布局 使用Flexible Box[1]进行多栏布局 需要固定宽度的flex设置为0 需要自动伸展的flex设置为1 /TR/css3-flexbox/ 2. 液态图片 fluid image 文字会自动根据容器宽度换行 图片需要设定百分比宽度 img { max-width: 100%; } 3. 媒体查询 media query 针对不同的屏幕应用不同的样式[1] link rel=“stylesheet” type=“text/css” href=“m.css” media=“screen and (max-width: 480px)” @media screen and (min-width: 480px) { .selector { … } } /TR/css3-mediaqueries/ Media Query Asset Downloading Results 4. 响应式栅格 responsive grid 根据屏幕宽度决定每行栅格数量以及每个栅格的宽度 响应式栅格系统 Bootstrap Foundation 3 responsive.gs 5. 响应式Javascript 使用matchMedia[1] matchMedia(‘screen and (min-width:480px)’).matches matchMedia browser fallback matchMedia.js 处理orientationChange事件 CSSOM View Module touch事件 Touch事件 鼠标事件 touch事件 mousedown touchstart mousemove touchmove mouseup touchend click - Touch Events 兼容鼠标事件 Safari Web Content Guide: Handling Events /zldsANh onclick delay 手机上的click事件有～300ms的延迟[1][2] 解决方案： 使用touchstart / touchend代替click Remove onClick delay on webkit for iPhone Creating Fast Buttons for Mobile Web Applications TouchEvent对象的属性 继承自UIEvent对象 有三个TouchList类型的关键属性 touches: 屏幕上所有手指 targetTouches: 当前元素上的手指 changedTouches: 有变化的手指 TouchList