• 1. 移动网站开发实践赵文博
  • 2. (本页无文本内容)
  • 3. (本页无文本内容)
  • 4. webkit.org
  • 5. 使用HTML5 响应式设计 touch事件 兼容高分屏 硬件加速 Debugging Tips
  • 6. (本页无文本内容)
  • 7. 语义化标签使用这些标签增强语义[1]: header footer nav article … New elements of HTML5
  • 8. 离线存储使用localstorage[1]: 保存用户地理位置信息 缓存Javascript和CSS[2] Web storage Storager case study: Bing, Google
  • 9. 访问设备使用geolocation [1]来获取用户地理位置Geolocation API Specifications
  • 10. 图形使用Canvas[1]和SVG[2]来绘制股票曲线HTML Canvas 2D Context Scalable Vector Graphics (SVG) 1.1
  • 11. CSS3CSS3[1]的使用很普遍: 用flexible box布局 圆角与阴影 渐变背景 border image transitionrgba 新的selector media query Base64图片[2]CSS Level 3 Data URI scheme
  • 12. 浏览器兼容性caniuse.com mobilehtml5.org
  • 13. 响应式(Responsive)网页设计
  • 14. 什么是响应式设计一种能在不同屏幕大小的设备上都能提供优秀的浏览体验的网页设计方案[1][2] 案例[3] Twitter Bootstrap Microsoft Boston GlobeWikipedia: Responsive Web Design A List Apart: Responsive Web Design Mediaqueri.es
  • 15. 响应式设计在手机上尤其重要手机屏幕较小, 固定宽度不可行 如果固定宽度太大, 则需要双向滚动 如果固定宽度太小, 则不能充分利用屏幕空间 手机屏幕尺寸多样[1] List of displays by pixel density
  • 16. 1. 弹性布局 flexible layout页面的body宽度是100% 自适应布局 使用Flexible Box[1]进行多栏布局 需要固定宽度的flex设置为0 需要自动伸展的flex设置为1 http://www.w3.org/TR/css3-flexbox/
  • 17. 2. 液态图片 fluid image文字会自动根据容器宽度换行 图片需要设定百分比宽度 img { max-width: 100%; }
  • 18. 3. 媒体查询 media query针对不同的屏幕应用不同的样式[1]
  • 19. 4. 响应式栅格 responsive grid根据屏幕宽度决定每行栅格数量以及每个栅格的宽度 响应式栅格系统 Bootstrap Foundation 3 responsive.gs
  • 20. 5. 响应式Javascript使用matchMedia[1] matchMedia(‘screen and (min-width:480px)’).matches matchMedia browser fallback matchMedia.js 处理orientationChange事件CSSOM View Module
  • 21. touch事件
  • 22. Touch事件鼠标事件touch事件mousedowntouchstartmousemovetouchmovemouseuptouchendclick-Touch Events
  • 23. 兼容鼠标事件Safari Web Content Guide: Handling Events
  • 24. t.cn/zldsANh
  • 25. onclick delay手机上的click事件有~300ms的延迟[1][2] 解决方案: 使用touchstart / touchend代替clickRemove onClick delay on webkit for iPhone Creating 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对象包含rotation和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 480640 x 960
  • 32. 物理像素屏幕密度(Screen density)指单位长度内的物理像素数量, 一般用PPI(Pixels per inch)表示Towards retina web
  • 33. 浏览器像素在CSS和Javascript中使用的像素
  • 34. Device Pixel Ratio为了更好的阅读,网页中1个像素在Retina屏幕上用4个物理像素显示,devicePixelRatio是2
  • 35. 图片显示
  • 36. 1. 使用@2x图片使用图片 img { width: 50% } 背景图片 background-size: 50% 只在Retina屏上使用@2x 使用media query 使用工具来实现 Retina Images 服务器端根据UA返回不同尺寸图片 retinajs 用JS自动替换为@2x的图片
  • 37. 2. 使用CSS3代替图片圆角、渐变和阴影可用CSS3实现 图标可以用SVG图片或者web fonthttp://somerandomdude.com/work/iconic/ https://www.shifticons.com/
  • 38. 硬件加速
  • 39. 什么是硬件加速把一些计算量较大的图像处理工作交给专门的硬件(GPU)来处理以减轻CPU工作量的技术 网页在渲染时分成若干个层(layer), 这些layer由GPU组合(composite)Improving the Performance of your HTML5 App
  • 40. 启用硬件加速给需要做动画的元素添加样式 -webkit-transform: translate3d(0,0,0) 该元素在渲染时会放在一个单独的layer中 在该元素上使用CSS动画会很流畅HTML5 Techniques for Optimizing Mobile Performance
  • 41. 例子bodypopup
  • 42. 传统方法用Javascript设置一个timer, 逐帧改变.popup的top和left值
  • 43. 硬件加速的CSS3动画.popup { -webkit-transition: -webkit-transform 1s ease-in; -webkit-transform: translate3d(0, 0, 0) } .popup.moved { -webkit-transform: translate3d(100px, 100px, 0) }
  • 44. 对比Javascript动画CSS3动画for each frame: 更新DOM 更新RenderObject 更新RenderLayer 上传RenderLayer到GPU GPU进行Layer合成 更新界面上传bodyLayer和popupLayer到GPU for each frame: 上传matrix到GPU GPU进行Layer合成 更新界面Understanding Webkit Rendering
  • 45. DemoFalling Leaves 使用Chrome查看Layer
  • 46. 修复闪屏bug在webkit浏览器中启用硬件加速可能会造成屏幕闪一下的bug 解决方案 给需要动画的元素默认添加translate3d, 避免用户看到新layer创建的过程 给元素添加-webkit-backface-visibility: hidden
  • 47. Debugging
  • 48. 使用桌面浏览器调试Safari 在设置中显示开发菜单 在开发菜单设置User Agent为iPhone Chrome 在Debug工具的设置中设置User Agent为iPhone 还可以模拟touch事件
  • 49. 模拟器调试iOS模拟器[1] 仅在Mac上可用 安装Xcode和iOS SDK Android模拟器[2] 安装Eclipse 安装Android SDKUsing iOS Simulator Android Emulator
  • 50. 真机中使用Debug Console在iOS中开启 设置 > Safari > 高级 > Debug Console > ON 在Android中开启 在地址栏输入about:debug
  • 51. 远程调试iOS 6上连接Safari进行调试[1] Chrome for Android连接Chrome调试[2] 在低版本系统和浏览器上 weinre Adobe Edge InspectEnabling Web Inspector on iOS Remote Debugging
  • 52. Tips
  • 53. 禁止用户缩放网页用户缩放网页后 ViewPort大小会发生变化,放大网页ViewPort会变小 触发Resize事件 禁止缩放[1] Configuring the Viewport
  • 54. overflow:scroll & position:fixed在iOS5和Android3以前, 手机浏览器都不支持position:fixed和overflow: hidden 使用Javascript组件模拟 iScoll.js Scrollability YUI ScrollView
  • 55. (本页无文本内容)
  • 56. 隐藏浏览器地址栏$(document).ready(function(){ window.scrollTo(0, 1); }); Quick Tip: Hide Mobile Web Browser Address Bar Improved
  • 57. (本页无文本内容)
  • 58. 添加到主屏幕 How to add a website icon to your Home screen Add to Home screen Javascript library
  • 59. 调用native应用可以使用自定义协议: mailto:zhaowenbo@360.cn 打开邮件 tel:123456 打开拨号程序 sms: hello Google Maps的URL会自动调用Maps myScheme:// 自定义协议Advanced App Tricks
  • 60. 去除iOS链接的灰色背景iOS上的链接及绑定了点击事件的元素触摸后出现半透明灰色背景 如何去除: -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 自定义点击反馈 .clickable:active { background: #EEE }How to add a website icon to your Home screen
  • 61. (本页无文本内容)
  • 62. 了解更多
  • 63. Developing Web Content for Safari Mozilla Mobile Developer Community GoMo HTML5 Rocks - Mobile