use mobile-fu to separate the mobile and computer webpage

Gemfile

@@ -10,7 +10,7 @@ end
 gem "jquery_mobile_rails", "1.3.2"
 gem "jquery-fileupload-rails"
 gem "paperclip"
-
+gem "mobile-fu-for-jquery-mobile"
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 4.0.0'
 

Gemfile.lock

@@ -62,6 +62,9 @@ GEM
       treetop (~> 1.4.8)
     mime-types (1.25.1)
     minitest (4.7.5)
+    mobile-fu-for-jquery-mobile (1.0.1)
+      rack-mobile-detect
+      rails
     multi_json (1.9.2)
     paperclip (4.1.1)
       activemodel (>= 3.0.0)
@@ -71,6 +74,8 @@ GEM
     pg (0.17.1)
     polyglot (0.3.4)
     rack (1.5.2)
+    rack-mobile-detect (0.4.0)
+      rack
     rack-test (0.6.2)
       rack (>= 1.0)
     rails (4.0.3)
@@ -137,6 +142,7 @@ DEPENDENCIES
   jquery-fileupload-rails
   jquery-rails (= 3.0.4)
   jquery_mobile_rails (= 1.3.2)
+  mobile-fu-for-jquery-mobile
   paperclip
   pg
   rails (= 4.0.3)

app/assets/javascripts/gallery.js

@@ -4,15 +4,15 @@ var isInfoshow = false;
 var distance;
 var count = 0;
 
-function isWeixinBrowser(){
-  var ua = navigator.userAgent.toLowerCase();
-  return (/micromessenger/.test(ua)) ? true : false ;
-}
+//function isWeixinBrowser(){
+  //var ua = navigator.userAgent.toLowerCase();
+  //return (/micromessenger/.test(ua)) ? true : false ;
+//}
 
 $(document).ready(function() {
-  if (!isWeixinBrowser()) {
-    document.write("请使用微信浏览器访问");
-  }
+  //if (!isWeixinBrowser()) {
+    //document.write("请使用微信浏览器访问");
+  //}
   var winWidth = document.body.clientWidth;
   var winHeight= document.body.clientHeight;
   var img = $("#display img");
@@ -165,4 +165,4 @@ $(document).on("pageinit","#page",function(){
       isInfoshow = false;
     }
   });
-});
+});

app/controllers/application_controller.rb

@@ -2,4 +2,5 @@ class ApplicationController < ActionController::Base
   # Prevent CSRF attacks by raising an exception.
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception
+  has_mobile_fu
 end

app/controllers/items_controller.rb

@@ -1,7 +1,7 @@
 class ItemsController < ApplicationController
-  layout "computer"
   before_filter :authenticate, only: [:index, :edit, :new, :show, :create, :update, :destroy]
   before_action :set_item, only: [:show, :edit, :update, :destroy]
+  has_mobile_fu_for :display
 
   # GET /items
   # GET /items.json
@@ -11,7 +11,6 @@ def index
 
   def display
     @items = Item.all
-    render :layout => "mobile"
   end
 
   # GET /items/1

app/views/items/display.html.erb

@@ -1,22 +1 @@
-<div>
-<!--Display Page-->
-  <div data-role="page" data-theme="b" id="page">
-    <!--Image Gallery -->
-    <div data-role="content" id="content">
-      <div id="display">
-        <% @items.each do |item| %>
-          <%= image_tag item.photo.url, class: 'item-image' %> 
-        <% end %>
-      </div>
-      <div id="imginfo">
-        <% @items.each do |item| %>
-          <div>
-            <p class="title">名称:<%= item.title %></p>
-            <p class="price">价格:<%= item.price %>元</p>
-            <p class="desc"><%= item.description %></p>
-          </div>
-        <% end %>
-      </div>
-    </div>
-  </div>
-</div>
+请使用手机浏览器访问

app/views/items/display.mobile.erb

@@ -0,0 +1,25 @@
+<div>
+<!--Display Page-->
+  <div data-role="page" data-theme="b" id="page">
+    <!--Image Gallery -->
+    <div data-role="header">
+    <%= link_to "首页", items_path, :rel => "external" %>
+    </div>
+    <div data-role="content" id="content">
+      <div id="display">
+        <% @items.each do |item| %>
+          <%= image_tag item.photo.url, class: 'item-image' %> 
+        <% end %>
+      </div>
+      <div id="imginfo">
+        <% @items.each do |item| %>
+          <div>
+            <p class="title">名称:<%= item.title %></p>
+            <p class="price">价格:<%= item.price %>元</p>
+            <p class="desc"><%= item.description %></p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

app/views/items/index.html.erb

@@ -1,7 +1,7 @@
 <% provide(:headline, '服饰') %>
 <div class="container">
   <ul class="items">
-    <% @items.each do |item| %>      
+    <% @items.each do |item| %>
       <li class="item">
         <div class='item-action'>
           <%= link_to 'X', item, method: :delete, data: { confirm: '你确定吗?' }, class: 'item-delete' %>
@@ -13,7 +13,7 @@
     <li class="item new-item">
       <div class="plus-vertical-middle" >
         <%= link_to '+', new_item_path, class: 'plus-sign'  %>
-      </div> 
+      </div>
     </li>
   </ul>
 </div>

app/views/layouts/computer.html.erb → app/views/layouts/application.html.erb

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>ItemDisplaying</title>
+  <title><%= yield(:headline) %></title>
   <%= stylesheet_link_tag    "computer", media: "all", "data-turbolinks-track" => true %>
   <%= javascript_include_tag "computer", "data-turbolinks-track" => true %>
   <%= csrf_meta_tags %>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
   <%= render 'layouts/header' %>

app/views/layouts/mobile.html.erb → app/views/layouts/application.mobile.erb

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>ItemDisplaying</title>
+  <title>服装</title>
   <%= stylesheet_link_tag    "mobile", media: "all", "data-turbolinks-track" => true %>
   <%= javascript_include_tag "mobile", "data-turbolinks-track" => true %>
   <%= csrf_meta_tags %>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <%= yield %> 
+  <%= yield %>
 </body>

config/initializers/mime_types.rb

@@ -2,4 +2,4 @@
 
 # Add new mime types for use in respond_to blocks:
 # Mime::Type.register "text/richtext", :rtf
-# Mime::Type.register_alias "text/html", :iphone
+# Mime::Type.register_alias "text/html", :mobile