Crispy Mobile empowers your Rails application with easy-accessible device-detection. In your controller or view, you can access device properties or add switches like:
- if device == :desktop
= stylesheet_link_tag :desktop
- else
= stylesheet_link_tag :mobile
= image_tag @photo.dynamic_url(device > :handheld_480 ? '600x400' : '300x200')
= image_tag @photo.dynamic_url("#{device.display_width}x")
CSS media queries are nice. But not for mobile.
They just add up code you send to your clients instead of reducing it for mobile devices.
Imagine you want to make a responsive product page.
- Do you really want to deliver a big 90KB product photo, if a 15KB photo would already fill the mobile screen?
- Do you really want to compute personalized product recommendations if they are just hidden afterwards?
- Do you really want mobile devices to download and interpret your whole stylesheet if half of the interface elements are going to be hidden anyway?
You don't.
If you start mobile-first, don't let your mobile performance be affected by additional desktop features.
Be kind, serve the clients exactly what they need.
A middleware is introduced which looks up the user agent string in the WURFL repository.
Pending. Please have a look at the source.
In your Gemfile add:
gem 'crispy-mobile'
In your ApplicationController add:
include Crispy::DeviceHelpers
See MIT-LICENSE.