移动网站开发实践赵文博1. webkit.org使用HTML5响应式设计touch事件兼容高分屏硬件加速DebuggingTips语义化标签使用这些标签增强语义1: header footer nav article 1. New elements of HTML5离线存储使用localstorage1:保存用户地理位置信息缓存Javascript和CSS21. Web storage 2. Storager case study: Bing, Google访问设备使用geolocation 1来获取用户地理位置1. Geolocation API Specifications图形使用Canvas1和SVG2来绘制股票曲线1. HTML Canvas 2D Context 2. Scalable Vector Graphics (SVG) 1.1CSS3CSS31的使用很普遍: 用flexible box布局 圆角与阴影 渐变背景 border image transition rgba 新的selector media query Base64图片21. CSS Level 3 2. Data URI scheme浏览器兼容性 caniuse.com mobilehtml5.org响应式(Responsive)网页设计什么是响应式设计 一种能在不同屏幕大小的设备上都能提供 优秀的浏览体验的网页设计方案12 案例3 Twitter Bootstrap Microsoft Boston Globe1. Wikipedia: Responsive Web Design 2. A List Apart: Responsive Web Design 3. Mediaqueri.es响应式设计在手机上尤其重要 手机屏幕较小, 固定宽度不可行 如果固定宽度太大, 则需要双向滚动 如果固定宽度太小, 则不能充分利用屏幕空间 手机屏幕尺寸多样11. List of displays by pixel density1. 弹性布局 flexible layout 页面的body宽度是100% 自适应布局 使用Flexible Box1进行多栏布局 需要固定宽度的flex设置为0 需要自动伸展的flex设置为11. http:/www.w3.org/TR/css3-flexbox/2. 液态图片 fluid image 文字会自动根据容器宽度换行 图片需要设定百分比宽度img max-width: 100%; 3. 媒体查询 media query 针对不同的屏幕应用不同的样式1Safari 高级 Debug Console ON 在Android中开启 在地址栏输入about:debug远程调试 iOS 6上连接Safari进行调试1 Chrome for Android连接Chrome调试2 在低版本系统和浏览器上 weinre Adobe Edge Inspect1. Enabling Web Inspector on iOS 2. Remote DebuggingTips禁止用户缩放网页 用户缩放网页后 ViewPort大小会发生变化，放大网页ViewPort会变小 触发Resize事件 禁止缩放1 1. Configuring the Viewportoverflow:scroll );1. Quick Tip: Hide Mobile Web Browser Address Bar Improved添加到主屏幕1. How to add a website icon to your Home screen 2. Add to Home screen Javascript library调用native应用 可以使用自定义协议: mailto:zhaowenbo360.cn 打开邮件 tel:123456 打开拨号程序 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