Rails 3 中的移動風格切換，輔助方法與媒體查詢

Question

我正在研究為移動使用設置 Rails 應用程序樣式的方法。

這個想法很常見，使用一組 styles 用於移動瀏覽器，另一組用於傳統瀏覽器。

據我所知，在 Rails 中有兩種基本方法：

使用輔助方法檢測用戶代理，然后執行切換。

application_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

這取決於。

在我的個人網站上，我使用媒體查詢來更改移動瀏覽器的 styles。 這在這種情況下非常有效，因為頁面中的圖像非常少，並且大多數樣式更改只是為了使網站垂直並縮小字體大小。

然而不幸的是，並不是每部手機都能理解媒體查詢。 此外，根據您對媒體查詢所做的工作，您可能會通過使用媒體查詢來犧牲性能。 例如，縮小大圖像的顯示或隱藏內容會對網絡受限手機的性能產生負面影響。

對於復雜的網站，您可能還想渲染完全不同的網站來定制移動體驗。 使用“助手”方法可以讓您自定義的不僅僅是樣式表。 這也允許移動用戶通過傳遞在您的mobile? 方法。

總結：如果它很簡單，媒體查詢是一種自定義顯示的簡單方法，但是移動體驗可能會比僅僅輕微的顯示調整更全面地不同。 嘗試使用 CSS 來定制整個體驗並不是一個好主意。