Rails 3 中的移动风格切换，辅助方法与媒体查询

我正在研究为移动应用设计 Rails 应用程序样式的方法。

这个想法很常见，为移动浏览器使用一组样式，为传统浏览器使用另一组样式。

据我所知，Rails 中有两种基本方法可以做到这一点：

使用辅助方法来检测用户代理，然后执行切换。

应用程序控制器.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%>

或者在样式表中使用媒体查询

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
 }
}

我的问题是权衡是什么？一种方法通常更好，还是两种方法都有很好的用例。

提前致谢

这取决于。

On my 个人网站 http://www.thegorgonlab.com/我使用媒体查询来更改移动浏览器的样式。在这种情况下，这种方法效果很好，因为页面的图像很少，并且大多数样式更改只是为了使网站垂直并缩小字体大小。

然而不幸的是，不是所有手机都能听懂 http://www.quirksmode.org/m/css.html#t021媒体查询。此外，根据您对媒体查询的处理方式，您可能会使用媒体查询牺牲性能。 http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/例如，缩小大图像的显示或隐藏内容会对网络受限的移动电话的性能产生负面影响。

对于复杂的网站，您可能还希望呈现完全不同的网站以定制移动体验。使用“助手”方法可以让您自定义的不仅仅是样式表。这还允许移动用户通过传递在您的手机中考虑的附加参数来访问手机上的“正常”网站。mobile? method.

总结：如果很简单，媒体查询是自定义显示的一种简单方法，但是移动体验可能会比仅进行细微的显示调整有更全面的不同。尝试使用 CSS 来定制整个体验并不是一个好主意。