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

這取決於。

在我的personal website我使用媒體查詢來更改移動瀏覽器的樣式。在這種情況下，這種方式非常有效，因爲該頁面的圖像非常少，大部分樣式更改只是爲了使網站垂直並縮小字體大小。

然而，不幸的是，not every mobile phone understands媒體查詢。此外，根據您對媒體查詢所做的操作，您可能會使用sacrificing performance by using media queries.例如，縮小大圖像的顯示範圍或隱藏內容會對受網絡限制的手機的性能產生負面影響。

對於複雜的網站，您可能還想渲染完全不同的網站來定製移動體驗。使用「幫助器」方法可以讓您自定義更多的樣式表。這還允許移動用戶通過在您的mobile?方法中考慮附加參數來訪問其手機上的「正常」網站。

總結：如果很簡單，媒體查詢是一種簡單的自定義顯示方式，但是移動體驗可能會比小調整顯示更爲全面。嘗試使用CSS來定製整個體驗不是一個好主意。