Советы для одной страницы JQuery, поддерживающей как Desktop, так и Mobile?

В настоящее время у меня есть сайт, на котором размещается страница, на которой я хочу как обслуживать настольные, так и мобильные браузеры. Дизайн и реализация рабочего стола уже завершены и использует JQuery.

Мне бы очень хотелось, чтобы эта страница использовала другой макет, когда пользователь посещает мобильный браузер, поддерживаемый JQuery Mobile.

Я пытаюсь найти лучший способ сделать это, но не могу найти информацию о лучших практиках для этого. Все существующие документы/руководства, которые я могу найти на этом, предполагают, что страница jQuery, которую вы пишете, исключительно поддерживает мобильные браузеры, поэтому не обращается к форматированию для рабочего стола.

Параметры, которые кажутся очевидными:

  • Те же страницы, но только дополнительная разметка поверх существующего контента для переформатирования для мобильных устройств.
  • На той же странице, но с дополнительной надписью, которая дублирует существующий контент, но отформатирована для мобильных устройств. Если браузер для настольных компьютеров неконтактный контент скрыт/не отображается.
  • Некоторое динамическое обнаружение мобильного или немобильного трафика, а затем маршрута между двумя разными страницами (рабочий стол и мобильный)

Я думаю, что # 2, вероятно, самый простой, но мне не нравится идея дублирования контента на странице. # 1 кажется нереалистичным думать, что я могу просто увеличить свой существующий контент с помощью кучки разметки, чтобы волшебным образом иметь формат для мобильных устройств (при этом поддерживая рабочий стол).

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

Уточнение: Предположим, что я не использую Rails, ASP.NET MVC и т.д.

ОТВЕТЫ

Ответ 1

Запросы CSS Media отлично подходят для этого. (будьте осторожны, это CSS3), основанный на размере агента просмотра (и он обновляется динамически!) определенный контент может быть скрыт или отображен, что делает его в основном морфий ваших вариантов # 1 и # 2. У вас будет большой полнофункциональный макет для рабочего стола, с его стилем и jQuery, а когда экран будет небольшим (это означает, что телефон или ботаник изменяет размер его браузера), вы скрываете некоторые из более подробных материалов и рестилируете несколько вещей и возможно, отобразить несколько других вещей. Читайте о медиа-запросах здесь: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html EDIT: просто для уточнения, вы можете полностью настраивать элементы со средствами массовой информации, поэтому на рабочем столе размер div может иметь пунктирную границу, закругленные углы, отступы 10px и т.д., Тогда как на телефоне div имеет 1px прокладку, сплошную границу и т.д.

Ответ 2

Я уверен, что вы преодолели эту проблему, поскольку этот вопрос пару месяцев назад, но я думал, что предлагаю то, над чем я работаю, для того же типа проблем.

Проблема. Я хочу, чтобы сайт был приемлемым для мобильных устройств, планшетов и больших и маленьких настольных экранов.

Решение:

  • CSS Media Queries - это очевидный выбор, позволяющий масштабировать страницу и "отвечать" на окно просмотра пользователя. Там огромный толчок прямо сейчас и некоторые интересные разговоры относительно отзывчивого дизайна, отзывчивых изображений и т.д. Я разрабатываю для мобильных устройств сначала (еще одно нажатие) и используя медиа-запросы для изменения макета/видимого содержимого по мере увеличения экрана.

  • Большая проблема возникает с JavaScript. Если я использую мобильную инфраструктуру JS, то она также будет включена в мою настольную версию - не идеальна. Если я использую jQuery для обоих, то я получаю много дополнительной пропускной способности в своей мобильной версии, чего я бы предпочел не иметь. Я решил использовать Modernizr, чтобы позволить мне загружать скрипты на основе размера экрана с помощью теста новых медиа-запросов Modernizr. Это позволило мне сохранить одну страницу и подавать ее на различные размеры экрана, не жертвуя качеством для мобильных/планшетов/настольных компьютеров. Ниже приведена простая проверка медиа-запросов modernizr:

if (Modernizr.mq('only screen and (max-width: 480px)')) {  
    Modernizr.load('/mobile.js');  
} else if (Modernizr.mq('only screen and (max-width: 768px)')) {  
    Modernizr.load('/tablet.js');  
} else {  
    Modernizr.load('/desktop.js');  
}