Советы по использованию одной страницы JQuery для настольных и мобильных устройств?

Question

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

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

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

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

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

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

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

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

Answer 1

CSS Media Queries отлично подходят для этого.(будьте осторожны, это CSS3) в зависимости от размера агента просмотра (и он динамически обновляется!), определенный контент может быть скрыт или отображен, что делает его по сути изменением ваших вариантов № 1 и № 2.У вас будет большой полнофункциональный макет для рабочего стола с его стилем и jQuery, а когда экран маленький (то есть телефон или ботаник, изменяющий размер своего браузера), вы прячете некоторые более подробные вещи и переделываете некоторые вещи иможет показывать несколько других вещей.Прочитайте о медиазапросах здесь: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html РЕДАКТИРОВАТЬ: просто чтобы уточнить, вы можете полностью настроить элементы с медиазапросами, поэтому при размере рабочего стола у div может быть пунктирная граница, закругленные углы, отступы 10px и т. Д.,в то время как в телефоне div имеет отступ 1px, сплошную рамку и т. д.

Answer 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');  
}