HTML5移动网站开发实践.pptVIP

物理像素 屏幕密度(Screen density)指单位长度内的物理像素数量, 一般用PPI(Pixels per inch)表示 Towards retina web 浏览器像素 在CSS和Javascript中使用的像素 Device Pixel Ratio 为了更好的阅读，网页中1个像素在Retina屏幕上用4个物理像素显示，devicePixelRatio是2 图片显示 1. 使用@2x图片 使用图片 img { width: 50% } 背景图片 background-size: 50% 只在Retina屏上使用@2x 使用media query 使用工具来实现 Retina Images 服务器端根据UA返回不同尺寸图片 retinajs 用JS自动替换为@2x的图片 2. 使用CSS3代替图片 圆角、渐变和阴影可用CSS3实现 图标可以用SVG图片或者web font /work/iconic/ / 硬件加速 什么是硬件加速 把一些计算量较大的图像处理工作交给专门的硬件(GPU)来处理以减轻CPU工作量的技术 网页在渲染时分成若干个层(layer), 这些layer由GPU组合(composite) Improving the Performance of your HTML5 App 启用硬件加速 给需要做动画的元素添加样式-webkit-transform: translate3d(0,0,0) 该元素在渲染时会放在一个单独的layer中 在该元素上使用CSS动画会很流畅 HTML5 Techniques for Optimizing Mobile Performance 例子 body popup 传统方法 用Javascript设置一个timer, 逐帧改变.popup的top和left值 硬件加速的CSS3动画 .popup { -webkit-transition: -webkit-transform 1s ease-in; -webkit-transform: translate3d(0, 0, 0)} .popup.moved { -webkit-transform: translate3d(100px, 100px, 0)} 对比 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 Demo Falling Leaves 使用Chrome查看Layer 修复闪屏bug 在webkit浏览器中启用硬件加速可能会造成屏幕闪一下的bug 解决方案 给需要动画的元素默认添加translate3d, 避免用户看到新layer创建的过程 给元素添加-webkit-backface-visibility: hidden Debugging 使用桌面浏览器调试 Safari 在设置中显示开发菜单 在开发菜单设置User Agent为iPhone Chrome 在Debug工具的设置中设置User Agent为iPhone 还可以模拟touch事件 移动网站开发实践 使用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 quer