Пишите разные HTML для ipad только в файле index.html

Question

У меня есть сайт, на котором запущен рельс с помощью начальной загрузки. Существует сайт для мобильных устройств и планшетов. Мобильные и планшетные сайты имеют совершенно одинаковую функцию, за исключением немного отличающихся страниц индекса.

Я использовал этот Railscast для загрузки приложения на мобильное устройство.

Можно ли использовать другой URL-адрес, аналогичный используемому в статье для планшетов.

Например, для мобильного телефона, localhost:3000/pages/home?mobile=0

Это то, что можно использовать. Можем ли мы использовать что-то подобное для планшетов?

Подобно тому, как мы пишем медиа-запросы для CSS, возможно ли, что я пишу другой HTML-код в файле mobile.html и загружаю этот кусок кода для вкладок, поскольку мне нужно только небольшое изменение только для страницы индекса.

Пожалуйста, предложите.

Answer 1

Это должно быть ориентировано на рельсы

Вы хотите использовать request.user_agent:

if request.user_agent =~ /android|blackberry|iphone|ipad|ipod|iemobile|mobile|webos/i
 ## mobile
else
 ## not mobile
end 

Так что вы можете сделать что-то вроде этого:

#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
   def mobile?
      request.user_agent =~ /android|blackberry|iphone|ipad|ipod|iemobile|mobile|webos/i
   end
   helper_method :mobile?
end

#app/views/pages/home.html.erb
<%= render "small_change" if mobile? %>

-

Некоторые ссылки:

• Rails 3 обнаруживает запрос от мобильных клиентов
• Rails способ обнаружить мобильное устройство?

---

Обновить

Вышеуказанное позволяет позвонить mobile? метод в любом представлении вам нужно.

Поскольку он находится в контроллере приложения, он имеет доступ к request объект (в противном случае вам придется передавать его в действие каждый раз).

Итак, когда вы спросили:

Так, где я должен поместить этот код в index.html для мобильных устройств? Поскольку я не хочу добавлять другие файлы

... нет "мобильного" index.html.erb. Вы можете позвонить mobile? метод в любом представлении вам нужно:

#app/views/pages/home.html.erb
<% if mobile? %>
   .... do something here.
<% end %>

Answer 2

Меньше - больше. Будь проще. Я предлагаю простое решение jquery/html/css. Есть один и только один файл. Измените различные области HTML-файла с помощью уникальных имен классов. В этом случае у меня есть настольное кодирование или мобильное кодирование. В вашем случае вы можете разделить его по своему усмотрению, очевидно, изменив оператор if, показанный ниже.

В HTML:

 <main id="top_main"  class="website_desktop">desktop content goes here.</main>

или же

<main  id="top_mobile" class="website_mobile">mobile content goes here.</main>

В сценарии:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // display stuff for mobile
    jQuery("#top_main").css("display", "none");
    jQuery("#top_mobile").css("display", "block");
}else {
    // hide all stuff for mobile, display desktop
    jQuery("#top_mobile").css("display", "none");
    jQuery("#top_main").css("display", "block");
} 

Идентификаторы используются для скрипта, классы используются для различных элементов управления CSS (в моем примере, мобильный и рабочий стол)