1、移动网站开发实践2341.webkit.org5使用HTML5响应式设计touch事件兼容高分屏硬件加速DebuggingTips67语义化标签语义化标签使用这些标签增强语义1:header footer nav article 1.New elements of HTML58离线存储离线存储使用localstorage1:保存用户地理位置信息缓存Javascript和CSS21.Web storage2.Storager case study:Bing,Google9访问设备访问设备使用geolocation 1来获取用户地理位置1.Geolocation API Specification
2、s10图形图形使用Canvas1和SVG2来绘制股票曲线1.HTML Canvas 2D Context2.Scalable Vector Graphics(SVG)1.111CSS3CSS31的使用很普遍:用flexible box布局 圆角与阴影 渐变背景 border image transition rgba 新的selector media query Base64图片21.CSS Level 32.Data URI scheme12浏览器兼容性浏览器兼容性 mobilehtml5.org13响应式(Responsive)网页设计14什么是响应式设计 一种能在不同屏幕大小的设备上都能
3、提供优秀的浏览体验的网页设计方案12 案例3 Twitter Bootstrap Microsoft Boston Globe1.Wikipedia:Responsive Web Design2.A List Apart:Responsive Web Design3.Mediaqueri.es15响应式设计在手机上尤其重要 手机屏幕较小,固定宽度不可行 如果固定宽度太大,则需要双向滚动 如果固定宽度太小,则不能充分利用屏幕空间 手机屏幕尺寸多样11.List of displays by pixel density161.弹性布局 flexible layout 页面的body宽度是100%自
4、适应布局 使用Flexible Box1进行多栏布局 需要固定宽度的flex设置为0 需要自动伸展的flex设置为11.http:/www.w3.org/TR/css3-flexbox/172.液态图片 fluid image 文字会自动根据容器宽度换行 图片需要设定百分比宽度img max-width:100%;183.媒体查询 media query 针对不同的屏幕应用不同的样式1 Safari 高级 Debug Console ON 在Android中开启 在地址栏输入about:debug51远程调试 iOS 6上连接Safari进行调试1 Chrome for Android连接Ch
5、rome调试2 在低版本系统和浏览器上 weinre Adobe Edge Inspect1.Enabling Web Inspector on iOS2.Remote Debugging52Tips53禁止用户缩放网页 用户缩放网页后 ViewPort大小会发生变化，放大网页ViewPort会变小 触发Resize事件 禁止缩放1 1.Configuring the Viewport54overflow:scroll&position:fixed 在iOS5和Android3以前,手机浏览器都不支持position:fixed和overflow:hidden 使用Javascript组件模拟
6、 iScoll.js Scrollability YUI ScrollView5556隐藏浏览器地址栏$(document).ready(function()window.scrollTo(0,1););1.Quick Tip:Hide Mobile Web Browser Address Bar Improved5758添加到主屏幕1.How to add a website icon to your Home screen2.Add to Home screen Javascript library调用native应用 可以使用自定义协议:mailto: 打开邮件 tel:123456 打
7、开拨号程序 sms:hello Google Maps的URL会自动调用Maps myScheme:/自定义协议1.Advanced App Tricks去除iOS链接的灰色背景 iOS上的链接及绑定了点击事件的元素触摸后出现半透明灰色背景 如何去除:-webkit-tap-highlight-color:rgba(0,0,0,0)自定义点击反馈.clickable:active background:#EEE 1.How to add a website icon to your Home screen了解更多1.Developing Web Content for Safari2.Mozilla Mobile Developer Community3.GoMo4.HTML5 Rocks-Mobile
