服务器端选项，用于向不同的移动设备提供不同的页面结构（HTML）

Question

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

有两种主流方法：

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

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

1. 麻省理工学院的移动网站：黑莓和功能（少）手机不同于iOS和iPad Android设备，但提供相同的网址 - http://m.mit.edu/



1. CNN的移动网站：ditto - 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网址，网络应用程序 - 用groovy编写，但我认为可能有很多东西 - 发送回网站的触摸版本或更简单，剥离内容。 Web应用程序的选择至少基于WURFL数据。

我没有足够的重复点来发布与屏幕截图的比较，因此我必须将您自己指向网站。

您可以在桌面浏览器中输入m.npr.org来查看已删除的网站。您可以通过添加参数？devicegate.client = iPhone_3_0来覆盖默认设备检测，以查看您在智能手机上访问npr.org时会看到的触摸版本。如果你查看源代码，你可以看到不同的html＆amp; css在同一个子域服务。

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

Answer 2

检测移动设备所需格式的常用方法是接受标头：

application / xhtml + xml＆gt; XHTML text / vnd.wap.wml＆gt;老wml wap页面 。 。

在可以处理所有桌面html格式的较新设备上，您可以使用用户代理。

然后你必须问问自己你想做什么：

切换到另一个样式表（仅适用于较新的设备）。 切换到另一个视图逻辑，例如构建wml页面模板。 切换到完整的其他页面。

我认为第二种方法是最好的方法。许多Web框架可以轻松切换到另一个视图逻辑，而无需重写其余部分（mvc模式的荣耀）。

Answer 3

我有两个例子。

1. 使用XHP了解facebook如何实现这一目标，为不同的标记提供抽象的不同输出：One Mobile Site to Serve Thousands of Phones

   我希望在实际实施中有很多好东西。

2. 我使用一个名为HawHaw的框架，让你编写你的应用程序一次（在PHP对象或XML文件中），它会根据几个检查输出正确的标记（接受标题，代理字符串等）。