Excluding iPads from the mobile-fu Rails plugin

mobile-fu is a handy little Rails plugin that automatically detects when mobile devices are accessing your web application and adjusts the request format accordingly. For example:

Mime::Type.register_alias "text/html", :mobile

class ApplicationController < ActionController::Base
  has_mobile_fu

  def index
    if is_mobile_device?
      render :text => "You're using a mobile device!"
    else
      render :text => "You're not using a mobile device."
    end
  end
end

mobile-fu even loads any mobile stylesheets you’ve created, including device-specific stylesheets for iPhone, Android, Blackberry, etc. There is also a way to set the mobile flag manually. This comes in handy when you want to test your mobile layouts without actually picking up a device.

I did find one problem, though: by default, mobile-fu sets the mobile request format for iPads. This probably isn’t the desired behavior for most sites. Mobile Safari does an acceptable job of rendering without the need for specific enhancements on the server side.

I want my HTML pages to continue rendering on the iPad the same way they do in a desktop browser (at least until I have time to customize a layout specifically for the iPad).

It’s easy enough to get mobile-fu to do the right thing, though. Simply override the #set_mobile_format method thusly:

class ApplicationController < ActionController::Base
  has_mobile_fu
  
  # Continue rendering HTML for the iPad (no mobile views yet)
  def set_mobile_format
    is_device?("ipad") ? request.format = :html : super
  end
end

I also recommend adding the following to your CSS:

-webkit-appearance: none;

This prevents the iPad from rendering form controls natively. Native controls tend to break the layout of pages designed for desktop browsers. I’ve found it best to reserve native controls for when I actually build a dedicated iPad-only layout for the site.

Rails

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>