Ruby on Rails 的移动版视图答案

【问题标题】：Mobile version of views for Ruby on RailsRuby on Rails 的移动版视图
【发布时间】：2010-11-20 00:41:10
【问题描述】：

经过一些验证，我正在做正确的事情。我的 Ruby on Rails 应用程序具有以下结构：

/首页
关于.rhtml
index.rhtml
/显示
index.rhtml
/data push.js.erb
pull.js.erb
/布局
主页.rhtml
display.rhtml

一切正常，但我现在想添加一个针对移动设备的网站。虽然 iPhone 可以正确呈现网站，但提供更有针对性的体验会很好。理想情况下，我正在考虑拥有一个通过 .htaccess 重定向到的 iPhone.domain.com。

为此，我正在考虑为每个设备添加另一个视图
/iPhone
主页.rhtml
关于.rhtml
display.rhtml

但是，感觉很多数据会重复，例如关于页面会在两个地方。我想我可以有一个部分并做一些类似渲染：partial => 'home/about' 的事情，但这似乎有点hacky。

如何开发我的网站来支持这一点？

我在考虑这样的结构，但又不确定如何构建代码 - 我如何告诉它在 iPhone 目录中呈现视图...而不应用主布局
/显示
/iphone
index.rhtml

我真的很想就处理此问题和构建应用程序的最佳方法获得一些建议。虽然应用程序目前遵循一个结构，但它们可能会朝着不同的方向发展..

谢谢

本

【问题讨论】：

标签： iphone ruby-on-rails windows-mobile mobile

【解决方案1】：

首先，您应该使用 .html.erb 作为模板扩展

其次，您可以使用逻辑来根据用户代理 (request.user_agent) 检测要使用的布局类型。

layout :site_layout

def site_layout
  some_way_to_detect_the_layout_to_use
end

请注意，user_agent 可以伪造，但大多数人不会费心伪造它，因此解决方案对于 99.9% 的情况应该“足够好”。

【讨论】：

【解决方案2】：

我强烈建议在所有设备类型中保持相同的控制器结构。特别是如果您使用 Rails 的 RESTful 路由，您的控制器应该与数据的域模型紧密匹配。该数据随后是否呈现给桌面浏览器、iPhone、不同类型的移动设备、JSON/XML REST API 客户端等，主要是表示层的问题，而不是控制器/路由层的问题。

所以一个优雅的解决方案是：

根据用户代理检测设备类型（您可能需要参考 WURFL 用户代理数据库）；
使用 Rails 的respond_to 机制为每种设备类型呈现不同的视图格式；
为每种设备类型定义布局（例如，为移动设备使用 XHTML Mobile Profile doctype）；
根据设备类型包含不同的 CSS 文件。

有一些插件试图让这更容易：看看 brendanlim 的 Mobile Fu 和 noelrappin 的 Rails iUI（都在 GitHub 上）。 Brendan Lim's presentation at Rails Underground 也有一些想法。

你的目标应该是这样的：

def show
  @foo = Foo.find(params[:id])
  respond_to do |format|
    format.html       # => show.html.erb
    format.iphone     # => show.iphone.erb
    format.blackberry # => show.blackberry.erb
  end
end

如果移动设备上的用户真的想查看网站的桌面版本，您还应该允许他们覆盖用户代理检测。具有较长有效期的 cookie 可能是做到这一点的最佳方式，以便网站在用户下次返回时记住该选择。一些移动设备支持垃圾 cookie，但他们可能无论如何都不想要该网站的桌面版本，因为它可能无法正常工作。

【讨论】：

Rails iUI 和 Mobile-Fu 似乎有一段时间没有更新，并且没有适当的 Rails 3 支持。在 Rails 中处理手机的最新方法是什么？
我一直在使用 mobile_fu gem 的这个分支：github.com/benlangfeld/mobile-fu 2 个月前更新，可以满足我的需要。

【解决方案3】：

Iphone 实际上在没有任何特殊格式的情况下呈现网页方面做得很好。

但是，在我的 Android 手机上，浮动内容似乎被截断了，因此需要为该手机提供自定义视图。为此，您需要创建一个不同的布局（例如 mobile_application.html.erb）并在您的 application_controller 中添加以下内容：

layout :select_layout

  def select_layout
    session.inspect # force session load
    if session.has_key? "layout"
      return (session["layout"] == "mobile") ? "mobile_application" : "application"
    end
    return detect_browser
  end

  def detect_browser
    agent = request.headers["HTTP_USER_AGENT"].downcase
    MOBILE_BROWSERS.each do |m|
      return "mobile_application" if agent.match(m)
    end
    return "application"
  end

其中 MOBILE_BROWSERS 是您希望匹配为移动设备的用户代理字符串数组。

我在这里写了一篇关于这个的博客：

http://www.arctickiwi.com/blog/2-mobile-enable-your-ruby-on-rails-site-for-small-screens

干杯

【讨论】：

【解决方案4】：

Rails 4.1 包含变体，这是一个很棒的新功能：

允许您为相同的 mime 类型（例如 HTML）提供不同的模板和操作响应。对于任何为移动客户端提供服务的 Rails 应用程序来说，这都是灵丹妙药。您现在可以为桌面、平板电脑和手机视图创建单独的模板，同时共享所有相同的控制器逻辑。

在您的情况下，您只需在before_action 中设置 iphone 的变体，例如：

class HomeController < ApplicationController
  before_action :detect_iphone
  def index

    respond_to do |format|
      format.html               # /app/views/home/index.html.erb
      format.html.phone         # /app/views/home/index.html+phone.erb
    end
  end

  private
    def detect_iphone
      request.variant = :iphone if request.user_agent =~ /iPhone/
    end
end

What's new in Rails 4.1

【讨论】：