Recently on one of the projects at Eloquent Studio, I needed to render two very different view templates for desktop and mobile, even Bootstrap responsive design did not fit the requirement.

A little hesitant to roll out a custom solution for such a common requirement, I did some google searches and struck up the RailsGuides. ActionPack Variants is just what I was looking for. ActionPack Variants is a specialisation of request format . Released with Rails 4.1, the api was later improved to its current state in Rails 5 as per this PR

Within the controller action's respond to block



# app/controllers/patterns_controller.rb before_action :set_variant, only: :show def show format.html do |html| html.phone html.tablet end end private def set_variant case request.user_agent when /iPad/i request.variant = :tablet when /iPhone/i request.variant = :phone when /Android/i && /mobile/i request.variant = :phone when /Android/i request.variant = :tablet when /Windows Phone/i request.variant = :phone end end

And setup view templates as



# app/views/patterns/show.html.erb # Show page for desktop view

# app/views/patterns/show.html+tablet.erb # Show page for tablet view

# app/views/patterns/show.html+phone.erb # Show page for phone view

Not just devices, variants can be used for more varied use cases, like rendering different view templates based on user roles.

CoverImage Credits: https://unsplash.com/@bugsster