HTML5+CSS3在触屏网站开发的实践与挑战

“HTML5+CSS3在触屏网站上的实践”是2011年07月由卞飞主讲的一份PPT，探讨了HTML5和CSS3在触屏网站设计与开发中的应用和挑战。该资源主要关注触屏网站的现状、整体架构以及前端开发的经验分享。 在触屏网站的现状部分，PPT列举了机票搜索、酒店搜索、团购、列车搜索、景点和用户中心等多个应用场景，强调了触屏网站在当时的需求和设计趋势。在整体架构上，提到了浏览器、VelocityServlet、Mobile Server、Map、Json等组成部分，显示了一个包括前端、后端和服务的完整系统。 在前端结构方面，开发者面临选择纯HTML5+CSS3方案还是混合方案的决策。经过调研，他们决定采用混合方案，以兼顾兼容性和复杂特效的实现。在CSS3的运用中，提到了如`:first-child:last-child`、`:first-of-type`、`:last-of-type`选择器来解决首尾差异，使用`nth-child(n)`实现斑马条纹效果，利用`type="tel"`和`type="search"`改进表单支持，以及通过`input[type="search"]`进行类型选择。为了适应不同设备，还讨论了屏幕自适应的策略，虽然对Nokia S60 V5的适配存在挑战。 在前端JavaScript部分，报告分析了iUI、jQTouch、Sencha Touch和jQuery Mobile这四个移动Web开发框架，但由于UI风格不匹配、组件缺失等原因，最终选择了在PC上较为成熟的jQuery。为了优化用户体验，采用了JavaScript技术来隐藏浏览器地址栏和实现页面置顶，但遇到了Android和iOS设备的兼容性问题，需要寻找替代方案。 总结来说，这份PPT探讨了2011年时HTML5和CSS3在触屏网站开发中的实践，包括了技术选型、设计策略和兼容性处理等方面的问题，反映了当时移动互联网发展初期的技术挑战与解决方案。随着技术的进步，这些问题在当今可能已经得到了更好的解决，但这份资料仍能为理解早期移动Web开发的历史和演进提供参考。