mobile - 向不同移动设备提供不同页面结构 (HTML) 的服务器端选项

Question

我正在研究开发“经典”风格移动网站的最佳实践，即作为移动 HTML 页面与小型 JavaScript 应用程序(jQuery Mobile、Sencha 等)交付和体验的移动网站。

有两种流行的方法:

向所有移动设备提供相同的页面结构 (HTML)，然后使用 CSS 媒体查询或 JavaScript 来改善功能更强大的设备的体验。

向具有增强功能的设备提供完全不同的页面结构(可能还有内容)。

我对 的最佳实践特别感兴趣。第二方法。两个很好的例子是:

MIT 的移动网站:Blackberries 和功能(更少)手机与 iOS 和 Android 设备不同，但在相同的 URL 上可用 -- http://m.mit.edu/

CNN 的移动网站:同上 -- http://m.cnn.com/

我想听听 SO 这里的人实际上已经在做这样的事情，并且可以解释提供这种类型的设备相关结构/内容/体验的最佳实践是什么。

我不需要移动用户代理检测或 WURFL 或其他(伟大的)SO 线程中涵盖的任何概念，如 this one .我使用过 jQuery Mobile 和 Sencha Touch，并且我熟悉提供最终移动体验的大多数方法，因此也不需要任何指针。

我真正想了解的是:这些特定类型的体验是如何在基于用户代理组的服务器端检测和交付方面交付的——其中有一个精简的页面结构(不同的 HTML)交付给一组设备，以及交付给较新设备的另一种更丰富类型的 HTML 文档，但都位于相同的子域/URL。

希望一切都说得通。提前谢谢了。

Answer 1

在 NPR，我们使用服务器端“应用程序”来提供正确的 html/css/etc，具体取决于用户使用的是高端设备还是低端手机。

因此，当移动设备 ping npr.org 页面时，我们的服务器使用用户代理检测方法将它们指向相应的 m.npr.org。一旦定向到 m.npr.org URL，Web 应用程序 - 用 groovy 编写，但我认为可能有很多事情 - 发回网站的触摸版本或更简单、精简的内容。 Web 应用程序的选择至少在一定程度上基于 WURFL 数据。

我没有足够的代表点来发布与屏幕截图的比较，所以我必须将您指向这些网站本身。



您可以在桌面浏览器中通过输入 m.npr.org 来查看精简后的站点。您可以通过添加参数 ?devicegate.client=iPhone_3_0 来覆盖默认设备检测，以查看您刚刚在智能手机上访问 npr.org 时会看到的触摸版本。如果您查看源代码，您可以看到在同一个子域中提供不同的 html 和 css。

希望它有助于在野外看到这样的东西。那有意义吗？