Switch mobile style in Rails 3, helper method and media queries

Question

I am learning how to style a Rails application for use on mobile devices.

The idea is widespread using one set of styles for mobile browsers and another set for traditional ones.

From what I can say, there are two main ways to do this in Rails:

Using a helper method to discover the user agent, and then provision the switch.

application_controller.rb

private def mobile? request.user_agent =~ /Mobile|webOS/ end helper_method :mobile? 

application.html.erb

 <% unless mobile? %> <%= stylesheet_link_tag "core" %> <%else%> <%= stylesheet_link_tag "mobile" %> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <% end%> 

Or using media queries in style sheets

 body { // basic styles } @media all and (max-width: 600px) { body { // extra styles for mobile } } @media all and (min-width: 600px) { body { // extra styles for desktop } } 

My question is, what is a compromise? Is one method generally better or are there good use cases for both.

Thanks in advance

Answer 1

It depends.

On my personal website, I use media queries to change styles for mobile browsers. This works very well in this case, because there are very few images on the page, and most of the style changes are just to make the website look upright and reduce the font size.

Unfortunately, however, not every mobile phone understands media queries. In addition, depending on what you do with your media queries, you may sacrifice performance with media queries. For example, reducing the display of large images or hiding content adversely affects the performance of mobile phones with disabilities.

For complex websites, you can also display completely different websites to customize your mobile experience. Using the helper approach allows you to customize more than just a stylesheet. It also allows mobile users to access the “normal” website on their phone by passing an extra parameter, which is taken into account in your mobile? method mobile? .

In short: if it’s simple, multimedia queries are an easy way to customize the display, but the experience with mobile devices is more likely to be more holistic than just minor display settings. Trying to use CSS to customize the whole experience is not a good idea.