2014年最佳移动侦测（Rails＆amp; JS）

Question

移动世界几乎每天都在变化。扩展http://scottwb.com/blog/2012/02/23/a-better-way-to-add-mobile-pages-to-a-rails-site/这有点古老了 - 你们怎么看待这种移动和平板电脑检测方案？

使用案例：我的Rails应用的移动版和桌面版非常不同。虽然它们共享大多数视图，JS和CSS（在适用的情况下使用媒体查询），但在某些情况下我需要仅限移动和桌面的视图，JS和CSS。

代码更改

所有药片均应视为手机。

• Android平板电脑支持：How do detect Android Tablets in general. Useragent? - 已添加android
• Windows平板电脑支持：how to identify if user agent is windows 8 tablet? - 已添加touch
• 正确的webOS支持：What's the best way to detect a webOS tablet with jQuery / plain JS - 已添加hpwos

以上Android平板电脑主题提到了移动设备：

• /iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/

这适用于平板电脑：

• /ipad|android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/

但是，我认为只有下面的内容才有必要吗？

• /mobile|android|touch|webos|hpwos/

application_controller.rb

def mobile?
  if session[:mobile_override]
    session[:mobile_override] == "1"
  else
    request.user_agent.downcase =~ /mobile|android|touch|webos|hpwos/
  end
end
helper_method :mobile?

layout.html.erb

<% if mobile? %>
  <p>Mobile detected!</p>
<% end %>

的application.js

var isMobile = false;

if(/mobile|android|touch|webos|hpwos/i.test(navigator.userAgent.toLowerCase())) {
  isMobile = true;
}

if(isMobile) {
  console.log('Mobile detected!')
}

Answer 1

根据您的rails版本，您可以执行以下操作...

before_action :set_variant

def set_variant
 request.variant = :tablet if request.user_agent =~ /iPad/
end

然后在你的方法中做

respond_to do |format|
  format.html do |variant|
  variant.tablet # renders app/views/projects/show.html+tablet.erb
  variant.phone { extra_setup; render ... }
  variant.none  { special_setup } # executed only if there is no variant set
end

您需要为每个名称指定一个特定视图app/views/projects/show.html+tablet.erb等。

您可以在页面的一半here

找到所有这些内容