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

Question

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

有两种流行的方法:

1. 向所有移动设备提供相同的页面结构(HTML),然后使用CSS媒体查询或JavaScript来改善更多功能设备的体验.
2. 为具有增强功能的设备提供完全不同的页面结构(可能还有内容).

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

1. 麻省理工学院的移动网站:与iOS和Android设备相比,黑莓和功能(更少)手机不同,但可以使用相同的网址 - http://m.mit.edu/

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

我想听听SO的人们实际上是在做过类似的事情,并且可以解释提供这种类型的设备相关结构/内容/体验的最佳实践.

我并不需要在移动用户代理检测的引物,或WURFL,或任何的覆盖在其它(大)SO像线程的概念这一个.我使用过jQuery Mobile和Sencha Touch,我熟悉大多数提供最终移动体验的方法,所以没有指点要么感谢.

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

希望一切都有道理.提前谢谢了.

Answer 1

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

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

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

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

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