HTML5+CSS3触屏网站实战与兼容策略

HTML5+CSS3在触屏网站上的实践是一篇关于在2011年针对触屏设备进行网站开发的文章，作者卞飞主要探讨了HTML5和CSS3技术在创建移动优化网站时的应用和挑战。随着智能手机和平板电脑的普及，触屏网站的需求增长，这篇文章重点关注了以下几个方面： 1. **触屏现状**：文章首先概述了当时机票搜索、酒店搜索、团购、列车搜索、景点查询以及用户中心等场景下的触屏体验。这些应用展示了在不同场景下，如何利用HTML5和CSS3提高用户体验。 2. **整体架构**：文中提到的架构包括VelocityServlet、Mobile Server、Map Json等服务器端组件，以及前端结构的设计，如使用成熟的jQuery框架来保证交互性和性能。 3. **前端切图与CSS经验分享**：作者分享了对纯HTML5+CSS3方案（强调语义化和性能）与混合方案（兼容性好但特效实现复杂）的调研。混合方案被选中，同时为Nokia S60 V5开发了专用版本。前端开发中遇到了首尾差异、斑马条纹效果、表单支持、类型选择和屏幕自适应等问题，特别是对Nokia S60 V5的降级处理。 4. **JavaScript经验分享**：文章讨论了对四款主流移动Web开发框架（iUI、jQTouch、SenchaTouch、jQueryMobile）的评估，指出它们各自的问题，如UI风格冲突、组件缺失等。最终，作者选择使用PC上成熟的jQuery框架，但在Android和iOS上处理了隐藏地址栏和锚点跳转的问题。 5. **总结与反思**：作者强调了在触屏环境中，事件响应区域的重要性、HTML5带来的代码简化和CSS3可能带来的视觉优化。同时，也揭示了实际开发中的现实问题，即尽管厂商宣传支持新技术，但在实践中仍需谨慎调研并根据具体需求定制解决方案。 通过阅读这篇文章，读者可以了解到HTML5和CSS3在触屏网站开发中的应用策略、技术细节以及遇到的挑战，这对于移动开发者来说是一份有价值的实践指南。