Переключение в мобильном стиле в 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 для настройки всего опыта не является хорошей идеей.