Rails 3中的移动样式切换，辅助方法与媒体查询 [英] Mobile style switching in Rails 3, helper method vs media queries

问题描述

我正在研究为移动设备使用Rails应用程序的方法。

I am looking into the methods of styling a Rails app for mobile use.

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

The idea is common, using one set of styles for mobile browsers and another set for traditional.

从我可以知道的有两种基本的方式在Rails做这个：

From what I can tell there are two basic ways of doing this in Rails:

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

Using a helper method to detect the user agent and then preform the switch.

application_controller.rb

application_controller.rb

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

 helper_method :mobile?

application.html.erb

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 the 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 are the trade offs? Is one method generally better or are there good use cases for both.

提前感谢

推荐答案

这取决于。

在我的个人网站中，我使用媒体查询来更改移动设备的样式浏览器。在这种情况下工作得相当好，因为页面中的图片非常少，而且大多数样式更改只是为了使网站垂直和缩小字体大小。

On my personal website I use media queries to change the styles for mobile browsers. This works pretty well in this case because the page has very few images and the majority of style changes are just to make the website vertical and shrink font sizes.

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

Unfortunately, however, not every mobile phone understands media queries. Further, depending on what you're doing with your media queries, you may be sacrificing performance by using media queries. For example, shrinking the display of big images, or hiding content negatively affects performance in network constrained mobile phones.

对于复杂网站，您可能还想渲染完全不同的网站来自定义移动体验。使用帮助器方法允许您自定义不仅仅是样式表。这还允许移动用户通过传递在 mobile？方法中考虑的其他参数，访问手机上的常规网站。

For complicated websites, you may also want to render completely different websites to customize the mobile experience. Using the "helper" approach allows you to customize more than just the stylesheet. This also allows mobile users to access the "normal" website on their phone by passing an additional parameter that is taken into account in your mobile? method.

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

In summary : If it's simple, media queries are an easy way to customize display, however the mobile experience is likely going to be more holistically different than just minor display tweaks. Trying to use CSS to customize the entire experience isn't a good idea.

这篇关于Rails 3中的移动样式切换，辅助方法与媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！