HTML5+CSS3触屏实践：兼容与优化策略

HTML5+CSS3在触屏网站上的实践是一份于2011年7月发布的技术文章，由作者卞飞撰写，主要探讨了如何在移动设备日益普及的背景下，利用HTML5和CSS3进行触屏网站的设计与开发。本文重点关注了以下几个关键点： 1. **触屏现状**：文章首先介绍了几种常见的触屏应用场景，包括机票搜索、酒店搜索、团购、列车搜索、景点浏览以及用户中心，这些场景反映了当时移动互联网应用的实际需求。 2. **整体架构**：整体架构设计上，强调了跨平台兼容性和用户体验，通过VelocityServlet、Mobile Server、Map Json等组件构建了服务器端和客户端的交互，确保了不同设备的适配。 3. **前端技术**： - **HTML5+CSS3的优势**：作者提到纯HTML5+CSS3方案的优点，如更好的语义化和性能提升，但同时也指出混合方案（兼容旧版浏览器）的必要性，因为它能提供更好的兼容性。 - **前端切图与CSS经验分享**：分享了针对Nokia S60 V5这类特定设备的处理技巧，如解决首尾元素差异、斑马条纹效果、表单支持和类型选择，以及屏幕自适应策略。然而，对于某些功能如日期选择和suggestion组件，现有的移动框架并未满足需求，因此最终选择了PC上成熟的jQuery作为基础。 4. **JavaScript框架的选择**：通过对iUI、jQTouch、SenchaTouch和jQueryMobile等主流移动Web开发框架的调研，作者发现它们各有局限，最终选择成熟的jQuery来保证UI的一致性和所需功能的实现。 5. **前端JavaScript实践**：分享了如何通过JavaScript隐藏浏览器地址栏、在页面加载完成后自动定位等技术细节，同时提到了在Android和iOS上的不同特性处理，如Android对锚点的支持有限，而iOS支持程度较高。 总结来说，这篇文章是关于如何巧妙运用HTML5和CSS3进行触屏网站开发，兼顾性能、兼容性和用户体验，同时考虑到不同移动设备和浏览器特性的实战指南。尽管HTML5和CSS3带来了很多可能性，但在实际应用中仍需根据设备兼容性和功能性需求进行细致的设计和定制。