HTML5+CSS3在触屏网站上的实践.ppt

QA QA 最后感谢参与触屏的所有RD，UE和PM！ * * HTML5+CSS3在触屏网站上的实践 时间：2011年07月 卞飞 目录 触屏现状 支持系统：Android IOS 触屏现状 1.机票搜索 触屏现状 2.酒店搜索 触屏现状 3.团购 触屏现状 4.列车搜索 触屏现状 5.景点 触屏现状 6.用户中心 整体架构 浏览器 Velocity Servlet MobileServer Map Json 机票 酒店 团购 列车 用户中心 景点 整体架构图 整体架构 前端结构 我们经过考虑使用现有的比较成熟的JS框架Jquery 前端切图CSS经验分享 1.调研 纯HTML5+CSS3方案：语义化更好，性能更优 混合方案：兼容性好，部分特效实现较复杂 前端切图CSS经验分享 1.调研 结论：采用混合方案，并为Nokia S60 V5提供单独版本 前端切图CSS经验分享 2.实施 1.解决首尾差异：:first-child :last-child :first-of-type :last-of-type 2.斑马条纹的实现：nth-child(n) 3.表单支持：type=tel type=search 4.类型选择：input[type=search] 5.屏幕自适应： 遗憾：对Nokia S60 V5的粗暴降级 前端切图CSS经验分享 3.小结 触屏：意味着事件响应区域需要足够的空间，满足设计的同时也需要足够的人性化 HTML5：确实能让code变得更轻松 CSS3：或许会让重构人员练就火眼金睛 梦想很美好 现实很残酷： 无论厂商如何宣传对新技术的支持，我们都需要调研 前端JavaScript经验分享—调研 现有四大移动Web开发框架： iUI 完全使用iphone的UI jQTouch 色调偏暗和我们的UI冲突 Sencha Touch 有点重量级 jQuery Mobile 还不是很成熟 由于上述框架存在需要使用它们的UI，和我们的UI存在一定冲突，另外我们需要的组件如：日期，suggest等没有，所以我们最终选择了相对成熟的PC上的Jquery 前端JavaScript经验分享—实施 1.隐藏浏览器地址栏置顶 页面加载完后自动隐藏浏览器地址栏： $(document).ready(function() { setTimeout(scrollTo, 200, 0, 1); }); 前端JavaScript经验分享—实施 1.隐藏浏览器地址栏置顶 Android： 对锚点支持有限，只能跳转一次 ios ： 对锚点支持和pc浏览器一致替代方案： javascript: scrollTo(0, 1); 前端JavaScript经验分享—实施 2.LBS—获取经纬度地图显示 根据HTML5规范获取用户经纬度信息： var geol; try { if (typeof(navigator.geolocation) == undefined) { geol = google.gears.factory.create(beta.geolocation); } else { geol = navigator.geolocation; } } catch (error) { //alert(error.message); } 前端JavaScript经验分享—实施 2.LBS—获取经纬度地图显示 前端JavaScript经验分享—实施 2.LBS—获取经纬度地图显示 前端JavaScript经验分享—实施 2.LBS—获取经纬度地图显示 在地图显示： /maps?hl=zh-CNq=39.9044690755304,116.407356262207 前端JavaScript经验分享—实施 3.电话拨打 1.Web方式 a href=tel:4000086666 电话预订：4000086666 /a 2. wap（主要hack QQ和UC浏览器）a href=wtai://wp/mc;400008