Rails 3中的移动样式切换,辅助方法与媒体查询

Question

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

这个想法很常见,使用一组样式用于移动浏览器,另一套用于传统浏览器.

据我所知,在Rails中有两种基本的方法:

使用帮助程序方法检测用户代理,然后执行开关.

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

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

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

这取决于.

在我的个人网站上,我使用媒体查询来更改移动浏览器的样式.在这种情况下,这非常有效,因为页面的图像非常少,而且大多数样式更改只是为了使网站垂直并缩小字体大小.

然而,遗憾的是,并非每部手机都能理解媒体查询.此外,根据您对媒体查询的操作,您可能会通过使用媒体查询来牺牲性能.例如,缩小大图像的显示或隐藏内容会对网络受限的移动电话的性能产生负面影响.

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

总结:如果简单,媒体查询是一种简单的自定义显示方式,但移动体验可能会比仅仅进行微小的显示调整更具整体性.尝试使用CSS来定制整个体验并不是一个好主意.