brendanlim / mobile-fu

Automatically detect mobile requests from mobile devices in your Rails application.

Mobile Fu¶ ↑

Want to automatically detect mobile devices that access your Rails application? Mobile Fu allows you to do just that. People can access your site from a Palm, Blackberry, iPhone, iPad, Nokia, etc. and it will automatically adjust the format of the request from :html to :mobile.

Rails 3 Compatibility¶ ↑

The master branch of this plugin is Rails 3 compatible.

To use the Rails 3 compatible version of this plugin, please install it like so:

rails plugin install git://github.com/brendanlim/mobile-fu.git

Rails 2 Compatibility¶ ↑

You will need to install this plugin from the 2.x branch.

To use the Rails 2 compatible version of this plugin, please install it like so:

script/plugin install git://github.com/brendanlim/mobile-fu.git -r 2.x

Usage¶ ↑

Add this this one line to the controller.

class ApplicationController < ActionController::Base
  has_mobile_fu
end

Once this is in place, any request that comes from a mobile device will be be set as :mobile format. It is up to you to determine how you want to handle these requests. It is also up to you to create the .mobile.erb versions of your views that are to be requested.

Then add the line below to config/initializers/mime_types.rb

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

I recommend that you setup a before_filter that will redirect to a specific page depending on whether or not it is a mobile request. How can you check this?

is_mobile_device? # => Returns true or false depending on the device

You can also determine which format is currently set in by calling the following:

in_mobile_view? # => Returns true or false depending on current req. format

Also, if you want the ability to allow a user to switch between ‘mobile’ and ‘standard’ format (:html), you can just adjust the mobile_view session variable in a custom controller action.

session[:mobile_view] # => Set to true if request format is :mobile and false
                           if set to :html

So, different devices need different styling. Don’t worry, we’ve got this baked in to Mobile Fu.

If you are including a css or sass file via stylesheet_link_tag, all you have to do is add _device to the name of one of your files to override your styling for a certain device. The stylesheet that is loaded is dependant on which device is making the request.

e.g., Accessing a page from a Blackberry.

...  stylesheet_link_tag 'mobile.css' ...

This loads mobile.css, and mobile_blackberry.css if the file exists.

Supported stylesheet override device extensions at the moment are:

blackberry
iphone (iphone,ipod)
ipad
android
mobileexplorer
nokia
palm

The stylesheet awesomeness was derived from Michael Bleigh’s browserized styles: www.intridea.com/2007/12/9/announcing-browserized-styles

Inspiration for Mobile Fu came from Noel Rappin’s rails_iui: blogs.pathf.com/agileajax/2008/05/rails-developme.html

Hopefully this should help you create some awesome mobile applications.

Testing Mobile Interface¶ ↑

If you want to force the mobile interface for testing, you can either use a mobile device emulator, or you can pass ‘true’ to has_mobile_fu.

class ApplicationController < ActionController::Base
  has_mobile_fu(true)
end

Copyright © 2008 Brendan G. Lim, Intridea, Inc., released under the MIT license

mobile-fu's Issues

mobile-fu and jQuery Mobile

I am using mobile-fu with jQuery Mobile.
As you know, the jQuery Mobile convert a normal HTTP request to Ajax style request.
When I use mobile-fu with jQuery Mobile, It seems the mobile-fu doesn't understand mobile format and render the normal html template, not the mobile template.

Any Idea?

update regexes list with the ones from Mobile_Detect

I checked your regex list and I may suggest that you update it with the one from https://github.com/serbanghita/Mobile-Detect/blob/master/Mobile_Detect.php

Since I don't know Ruby it's hard to make a contribution to mobile-fu.

Support other formats besides HTML

If I want a single controller to respond in HTML, mobile_fu and some other format (like JSON or xml), I have to work around mobile_fu by storing the format before hand and checking again after mobile_fu has adjusted parameters. It'd be nice if instead of binaryally (I just made up that word) setting the format to :html or :mobile, mobile_fu would incorporate other formats. Thanks!

Bug: HTTP/1.1 406 Not Acceptable

When POSTing data I get HTTP/1.1 406 Not Acceptable response insted of created. If I delete has_mobile_fu from my controller things are working again.

Please close this repo or add link to https://github.com/benlangfeld/mobile-fu

It's misleading that this repo is the current top result in Google, but active development is being done at https://github.com/benlangfeld/mobile-fu

(With all the changes in mobile devices 2 years out-of-date is a big difference!)

Copying @benlangfeld

Mobile_fu shows Mobile Site to Search Bots (googlebot) instead of Desktop Site

Mobile_fu shows Mobile Site to Search Bots (googlebot) instead of Desktop Site. This is causing my site not to get indexed properly by google. For example when you do a site:MYSITE.COM in google look at the first link, homepage.. and select "cached" from google's search result page you will see that it is caching my mobile version of my home page instead of the desktop version.

force_mobile_format does not check for XHR requests

When using has_mobile_fu true to force requests to be mobile, XMLHttpRequests are included, which breaks AJAX. While this is in line with the documentation, I found it to be rather unexpected, since this mode is meant to be used during testing, when you likely will also be using AJAX requests.

This behavior should be easy to change and would make mobile_fu more useful.

Does not load layout

I've installed mobile_fu on rails 3.0.7, but it seams that it does not load application.html.haml or application.mobile.haml layout

Plugin not Found

I tried installing the plugin as instructed but I got this error:

First:
C:\ror\rails_apps\dev3_1>ruby script/plugin install [email protected]:brendanlim/mobile-fu.git -r 2.x
already installed: mobile-fu.git ([email protected]:brendanlim/mobile-fu.git). pass --force to reinstall

Second with --force:
C:\ror\rails_apps\dev3_1>ruby script/plugin install [email protected]:brendanlim/mobile-fu.git -r 2.x --force
Plugin not found: ["[email protected]:brendanlim/mobile-fu.git"]

Anyone knows why?

how to design screen size?

how to consider screen size?
480_800
400_800
they are all the mobile screen size?

readme doc spelling

Hi,

Just noticed that your readme docs say

is_mobile_view?

but looks like your code uses

in_mobile_view?

IE Browsers and False Positives

I've found that some IE browsers contain the string "Tablet PC" in their user-agent string, even though it's not a tablet. I believe this occurs in "Media Center" versions of Windows, and I think there might be reasons this can occur, too (thanks, Microsoft, for your utter brilliance).

An excellent example of this, along with some discussion, can be found here:
http://webmasters.stackexchange.com/questions/28569/why-would-an-ie8-in-a-desktop-has-a-tablet-pc-2-0-in-its-user-agent-string

Mobile Fu needs to be modified so that if the UA contains both MSIE and "Tablet PC", then yield to desktop.

Can you release as a gem?

Hello,

Can you release this plug in as a gem so it's easier to install and maintain up to date?

Thanks.

Broken link

The link blogs.pathf.com/agileajax/2008/05/rails-developme.html on your README file is broken

Great work, thanks!

New Blackberries not Detected

I'm using Mobile-fu and some of the recent blackberry models aren't getting detected. When looking at the user agent string it look slike they show up as 'mozilla/5.0 (windows, u; windows nt)....'

Have you seen this?

rails 3.1 and 3.2 asset pipeline

Hi,
it looks, that mobile_fu breaks rails 3.1 and above asset pipeline. After gem installation with Gemfile css's is'nt available via /assets/application.css, but available via /stylesheets/application.css. Could you please fix it? Also - as you maybe know vendor/plugins is deprecated for rails 3.2 and will be removed in rails 4. Could you please update your gem at rubygems.org?

fallback to html

Similar problem as this:
http://stackoverflow.com/questions/4062518/can-a-mobile-mime-type-fall-back-to-html-in-rails

When .mobile is not found, instead of throwing MissingTemplate exception, should try loading .html first.

devise not render view mobile when click link

if I type link : localhost:3000/users/sign_in and enter. it will render view mobile .
But when I in view mobile sign_up and click link to sign_in (same link), it render view of html not mobile. THen I refesh it render mobile view.
Do I miss some config?

Rails 5 deprecation warning on "before_filter"

Rails 5 (now in Beta 2, scheduled for final release by end of the month) throws a deprecation warning on the use of "before_filter":

DEPRECATION WARNING: before_filter is deprecated and will be removed in Rails 5.1. Use before_action instead.

It looks like mobile-fu causes warnings to display in apps that include it.

breaks assets pipeline

If I add has_mobile_fu to my ApplicationController the link to the main stylesheet is set to /stylesheets/application.css in my application.html.erb layout.

If I remove has_mobile_fu from my ApplicationController it is the default Rails 3.1 /assets/stylesheets/application.css

is_mobile_view? is now in_mobile_view?

I recently added mobile-fu to my rails 3 app and couldn't figure out why is_mobile_view? was throwing a method not found error. Eventually, I looked in the source and saw that the name has changed. Can you please update the documentation, or change the name back?

Should session[:mobile_view] be checked in is_mobile_device?

Dear all,

I got stuck when I tried to alter session[:mobile_view] to switch between html page and mobile page, hence I changed the method is_mobile_device? a bit like below:

def is_mobile_device?
    if session[:mobile_view]
      session[:mobile_view] == 'true'
    else
      request.user_agent.to_s.downcase =~ Regexp.new(ActionController::MobileFu::MOBILE_USER_AGENTS)
    end
end

Is this modification safe? Are there any better solution for this? Thanks!

@benlangfeld, seems you are active on creating the gem, could you kindly comment? Thanks.

Gem differs from plugin... issues with gem.

Hello. I am running rails 3.0.7.

If I install mobile-fu via add to my gemfile:

gem 'mobile-fu'

When I view the page on the iPad (or with an iPad user agent):

• The stylesheet tag for mobile.css is automatically added to application.mobile.erb.
• _The stylesheet tag for mobile_ipad.css _IS NOT* automatically added to application.mobile.erb*

When I view the page on the iPhone (or with an iPhone user agent):

• The stylesheet tag for mobile.css is automatically added to application.mobile.erb.
• _The stylesheet tag for mobile_ipad.css _IS* automatically added to application.mobile.erb*

If I install mobile-fu via plugin:

rails plugin install git://github.com/brendanlim/mobile-fu.git

When I view the page on the iPad (or with an iPad user agent):

• The stylesheet tag for mobile.css is automatically added to application.mobile.erb.
• _The stylesheet tag for mobile_ipad.css _IS* automatically added to application.mobile.erb*

When I view the page on the iPhone (or with an iPhone user agent):

• The stylesheet tag for mobile.css is automatically added to application.mobile.erb.
• _The stylesheet tag for mobile_ipad.css _IS* automatically added to application.mobile.erb*

Bottom line

All works correctly via installing by plugin, and not the gem. This leads me to believe that the gem and plugin are two different versions, and that there is a bug or difference in release in the gem.

Please look into this and fix if possible (and let us know that it is fixed!). With Rails 3, it is nice to have everything installed via gemfile and bundler.

Thank you,

Keil

Creative AutoUpdater modifies IE8 useragent resulting in a false positive

Creative's AutoUpdater (for soundcard drivers, etc) modifies the IE8 UserAgent (I have NFI why Creative thinks they are important enough to warrant this).

The modified user agent is: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; Creative AutoUpdate v1.40.01)

This matches the "pda" substring in the mobile_fu regex, resulting in IE8 users with Creative soundcards being served a mobile version of the site.

This could be solved by changing the "pda" to "\bpda", to check that the string "PDA" is preceded by a word boundary, rather than being a substring.

set_mobile_format's XHR filter breaks jQuery Mobile

set_mobile_format assumes that XHR requests should not use the :mobile format. I'm not sure it should have an opinion about this. jQuery Mobile makes XHR requests expecting that it will get the mobile version of a page. I really want to use jQuery Mobile, so I made the following very ugly patch in my copy:

if is_mobile_device? && !request.xhr?

to:

if is_mobile_device? && ['/','text/html'].include?(request.format)

Maybe this could be a configuration option.

how to contain view mobile in a new folder

by default the view mobile is in the same folder:

• products/index.html.haml
• products/index.mobile.haml

Because view in folder products is too large, I want store view mobile in a sub folder mobile in product:

• products/index.html.haml
• products/mobile/index.mobile.haml

is there any gem config to do that?

Exclude iPad from mobile view

There is no way to have the iPad not load a mobile view and mobile CSS!

The iPad is a mobile device and includes the string mobile in the user agent string. Because of this, even if I have removed the ipad string from MOBILE_USER_AGENTS, mobile-fu will still recognize it as a mobile device.

The problem is that some web sites work well and are designed to work well with the iPad and other tablet devices. These types of mobile devices have enough screen real estate where some sites would work well, and others wouldn't.

This issue needs to be addressed! The issue has already been commented on in the commits -> comments section by 3 people starting in May 2010!

• tsmango commented on brendanlim/mobile-fu May 17, 2010
• brendanlim commented on brendanlim/mobile-fu April 07, 2010
• kineticac commented on brendanlim/mobile-fu April 06, 2010

Possible resolution

Allow an option to disable tablets from the mobile user agents or perhaps even better: create a MIME type of :tablet and have tablets have their own views/css.

Please let me know what your thoughts are. I only write this because I think mobile-fu is a great plugin and would like to see it improve (and see it made usable).

Thanks,

Keil