Rails 3でのモバイルスタイルの切り替え、ヘルパーメソッドとメディアクエリの比較

Question

モバイル向けのRailsアプリのスタイリング方法を検討しています。

モバイルブラウザ用に1組のスタイルを使用し、伝統的なスタイル用に1組のスタイルを使用するという考え方が一般的です。

私はRailsの中でこれを行うための2つの基本的な方法があります伝えることができるものから、

：

ユーザーエージェントを検出し、スイッチをプリフォームするヘルパーメソッドを使用しては。

スタイルシートで

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

私の質問は、トレードオフは何をしているのですか？ 1つの方法が一般的に優れているか、両方のために良いユースケースがありますか。

ありがとうございます。

Answer 1

です。

私のpersonal website私はメディアクエリを使用してモバイルブラウザのスタイルを変更します。ページにはほとんど画像がなく、スタイルの変更の大部分はウェブサイトを垂直にしてフォントサイズを縮小するためです。

ただし、残念ながら、not every mobile phone understandsのメディアクエリ。さらに、メディアクエリで何をしているのかによっては、sacrificing performance by using media queries.かもしれません。たとえば、大きな画像の表示を縮小したり、コンテンツを隠すと、ネットワークに制約のある携帯電話のパフォーマンスが低下します。

複雑なウェブサイトの場合、完全に異なるウェブサイトをレンダリングして、モバイルエクスペリエンスをカスタマイズすることもできます。 "ヘルパー"アプローチを使用すると、スタイルシートだけでなくカスタマイズすることができます。これにより、モバイルユーザは、mobile?メソッドで考慮される追加のパラメータを渡すことで、電話機の「通常の」ウェブサイトにアクセスすることができます。

要約：単純な場合、メディアクエリはディスプレイをカスタマイズする簡単な方法ですが、モバイルエクスペリエンスはわずかなディスプレイの微調整よりも全体的に異なる場合があります。経験をすべてカスタマイズするためにCSSを使用しようとするのは良い考えではありません。