基于 Ruby on Rails 的 Variant Response，以及 Browser gem 来区分设备，使用响应式设计和 Turbolinks 来优化用户体验。
这些终端不仅用于访问，还需要支持推送和支付：
Browser::NAMES[:smileback] = 'SmileBack' # 我们 App 的自定义 User Agent 标识
Browser::NAMES[:wechat] = 'Wechat'
Browser::NAMES[:desktop] = 'Desktop'
class Browser
module Meta
class Smileback < Base
def meta
'smileback' if browser.smileback?
end
end
class Wechat < Base
def meta
'wechat' if browser.wechat?
end
end
class Desktop < Base
def meta
'desktop' if browser.desktop?
end
end
end
module Consoles
def smileback?
!(ua =~ /smileback/i).nil?
end
def wechat?
!(ua =~ /MicroMessenger/i).nil?
end
def desktop?
!mobile? && !wechat? && !smileback?
end
end
end
<body class="<%= Browser.new(ua: request.env['HTTP_USER_AGENT']).to_s %>"> <!-- class 会输出如 chrome modern mac webkit desktop 或 iphone ios mobile modern other safari safari5 webkit --!>
body{ /* 默认的样式 */ }
body.desktop{ /* 桌面浏览器定制样式 */ }
body.mobile{ /* 手机浏览器定制样式 */ }
body.wechat{ /* 微信定制样式 */ }
# application_controller.rb
before_action :detect_browser
private
def detect_browser
request.variant = :mobile if Browser.new(ua: request.env['HTTP_USER_AGENT']).mobile?
end
需要拆分的页面，做成如下形式：
app/views/pages/home.erb
app/views/pages/home.html+mobile.erb # 文件名格式为 响应格式+设备名
# application_helper.rb
def browser
@_browser ||= Browser.new(ua: request.env['HTTP_USER_AGENT'])
end
/ 懒得转 erb 格式了，下面这段是 slim 格式的
- if browser.smileback?
a.button href="jdxlsmileback://recharges/#{resource.id}/pay" 支付宝付款
= link_to '银联付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- elsif browser.wechat?
- if current_user.weixin_id
= link_to '微信支付', '#', id: 'wepay', class: 'button'
= link_to '银联付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- else
= link_to '银联付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true, class: 'button'
- elsif browser.mobile?
= link_to '支付宝付款', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
= link_to '银联付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- else
= link_to '支付宝付款', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
= link_to '微信支付', pay_recharge_path(resource, scan_wepay: true)
= link_to '银联付款', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
我们需要：
我们提供：
欢迎勾搭 hr@jiandanxinli.com
女王大人（曾用名：煤球）及她的孩子们
各种帅哥美女云集的活动
了解更多我们公司的详情可以移步这里： https://www.jiandanxinli.com/pages/37
