RailsCasts Pro episodes are now free!

Learn more or hide this

Mobile Devices

#199 Mobile Devices

Feb 01, 2010 | 13 minutes | Views, Controllers, Plugins
Change the look and behavior of a Rails app on mobile devices. Also use jQTouch to build a native-looking interface.
Click to Play Video ▶
  • Download:
  • source codeProject Files in Zip (198 KB)
  • mp4Full Size H.264 Video (22.4 MB)
  • m4vSmaller H.264 Video (14.4 MB)
  • webmFull Size VP8 Video (38.2 MB)
  • ogvFull Size Theora Video (28.5 MB)
Browse_code Browse Source Code

Resources

config/initializers/mime_types.rb 
Mime::Type.register_alias "text/html", :mobile
application_controller.rb 
before_filter :prepare_for_mobile

private

def mobile_device?
  if session[:mobile_param]
    session[:mobile_param] == "1"
  else
    request.user_agent =~ /Mobile|webOS/
  end
end
helper_method :mobile_device?

def prepare_for_mobile
  session[:mobile_param] = params[:mobile] if params[:mobile]
  request.format = :mobile if mobile_device?
end
views/layouts/application.html.erb 
<%= stylesheet_link_tag 'mobile' if mobile_device? %>
...
<p>
  <% if mobile_device? %>
    <%= link_to "Full Site", :mobile => 0 %>
  <% else %>
    <%= link_to "Mobile Site", :mobile => 1 %>
  <% end %>
</p>
views/layouts/application.mobile.erb 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title><%= h(yield(:title) || "Untitled") %></title>
    <%= stylesheet_link_tag "/jqtouch/jqtouch.min.css", "/jqtouch/themes/apple/theme.min.css" %>
    <%= javascript_include_tag "/jqtouch/jquery.1.3.2.min.js", "/jqtouch/jqtouch.min.js", "mobile" %>
    <%= yield(:head) %>
  </head>
  <body>
    <div class="current">
      <%- if show_title? -%>
      <div class="toolbar">
        <%= link_to "Back", nil, :class => "back" unless current_page? root_path %>
        <h1><%=h yield(:title) %></h1>
        <%= link_to "Full Site", root_url(:mobile => 0), :class => "button", :rel => "external" %>
        <%= yield(:toolbar) %>
      </div>
      <%- end -%>
      
      <% unless flash.empty? %>
        <div class="info">
        <%- flash.each do |name, msg| -%>
          <%= content_tag :div, msg, :id => "flash_#{name}" %>
        <%- end -%>
        </div>
      <% end %>
    
      <%= yield %>
    </div>
  </body>
</html>
views/projects/index.mobile.erb 
<% title "Projects" %>

<ul>
  <% for project in @projects %>
    <li class="arrow">
      <%= link_to h(project.name), project %>
      <small class="counter"><%= project.tasks.size %></small>
    </li>
  <% end %>
</ul>

<ul><li class="arrow"><%= link_to "New Project", new_project_path %></li></ul>
javascripts/mobile.js 
$.jQTouch({});