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

Question

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

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

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

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

应用程序 Controller .rb

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

 helper_method :mobile?

应用程序.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
 }
}

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

提前致谢

Answer 1

这取决于。

在我的 personal website我使用媒体查询来更改移动浏览器的样式。这在这种情况下效果很好，因为该页面的图像很少，而且大部分样式更改只是为了使网站垂直并缩小字体大小。

然而不幸的是，not every mobile phone understands媒体查询。此外，根据您对媒体查询的处理方式，您可能是 sacrificing performance by using media queries.例如，缩小大图像的显示或隐藏内容会对网络受限手机的性能产生负面影响。

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

总结:如果简单的话，媒体查询是自定义显示的一种简单方法，但是移动体验可能会在整体上有所不同，而不仅仅是微小的显示调整。尝试使用 CSS 来自定义整个体验并不是一个好主意。