6

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

有两种流行的方法：

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

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

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

m.mit.edu 在两个不同的设备上并排

  1. CNN手机站：同上——http: //m.cnn.com/

m.cnn.com 在两个不同的设备上并排显示

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

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

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

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

4

3 回答 3

3

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

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

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

m.npr.org 并排

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

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

于 2011-08-17T14:44:24.957 回答
1

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

application/xhtml+xml > xhtml text/vnd.wap.wml > Old wml wap pages 。. .

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

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

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

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

于 2011-08-16T22:34:46.250 回答
1

我有两个例子给你。

  1. 阅读 facebook 如何使用XHP为不同的标记提供抽象的不同输出来实现这一点： 一个移动站点服务于数千部电话

    我希望在他们的实际实现中会有很多好东西可用。

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

于 2011-08-18T11:14:30.237 回答