#jquery #jquery-mobile
#jquery #jquery-мобильный
Вопрос:
В настоящее время у меня есть сайт, на котором размещена страница, которую я хочу использовать как для настольных, так и для мобильных браузеров. Разработка и реализация рабочего стола уже завершена и использует jQuery.
Я бы хотел, чтобы эта страница использовала другой макет, когда пользователь посещает ее в мобильном браузере, поддерживаемом jQuery Mobile.
Я пытаюсь найти наилучший способ сделать это, но, похоже, не могу найти информацию о лучших практиках для этого. Вся существующая документация / руководства, которые я могу найти на этой странице, предполагают, что страница jQuery, которую вы пишете, поддерживает исключительно мобильные браузеры, поэтому не касается форматирования для рабочего стола.
Варианты, которые кажутся очевидными:
- Та же страница, но просто дополнительная разметка поверх существующего контента для переформатирования для мобильных устройств
- Та же страница, но с дополнительной разметкой, которая дублирует существующий контент, но отформатирована для мобильных устройств. При использовании браузера на рабочем столе немобильный контент скрыт / не отображается.
- Некоторое динамическое определение мобильных и немобильных устройств, а затем маршрут между двумя разными страницами (рабочий стол и мобильный)
Я думаю, что # 2, вероятно, самый простой, но мне не нравится идея дублирования содержимого на странице. # 1 кажется нереальным думать, что я могу просто дополнить свой существующий контент множеством разметок, чтобы волшебным образом отформатировать его для мобильных устройств (при сохранении поддержки рабочего стола).
Я был бы признателен за любые советы и указания на любые руководства, которые могут существовать, в которых рассказывается о лучших практиках.
Уточнение: Предположим, я не использую Rails, ASP.NET MVC и т.д.
Комментарии:
1. Взгляните на jquerymobile.com это хороший ресурс
Ответ №1:
Медиа-запросы CSS отлично подходят для этого. (осторожно, это CSS3) в зависимости от размера агента просмотра (и он обновляется динамически!) Определенный контент может быть скрыт или отображен, что делает его в основном модификацией ваших опций # 1 и # 2. У вас был бы большой полнофункциональный макет для рабочего стола с его оформлением и jQuery, а когда экран маленький (имеется в виду, что это телефон или ботаник, меняющий размер своего браузера), вы скрываете некоторые из более подробных элементов и изменяете некоторые вещи и, возможно, отображаете несколько других вещей. Читайте о медиа-запросах здесь: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html РЕДАКТИРОВАТЬ: Просто для пояснения: вы можете полностью настраивать элементы с помощью медиа-запросов, поэтому при размере рабочего стола div может иметь пунктирную границу, закругленные углы, отступ в 10 пикселей и т.д., Тогда как на телефоне div имеет отступ в 1 пиксель, сплошную границу и т.д.
Комментарии:
1. Я вижу, как эти запросы были бы полезны для скрытия некоторых элементов в зависимости от размера браузера, поэтому tx для указателя. С чем это мне не помогает, так это, скажем, у меня есть элемент, который я хочу, чтобы он выглядел одним образом на рабочем столе и другим на мобильном устройстве, например
<div>Hello World</div>. Скажем, на рабочем столе я хочу, чтобы он был отформатирован крупным шрифтом, а на мобильном устройстве я хочу, чтобы он был меньше, или, используя jQuery Mobile, я хочу, чтобы он был в виде сворачиваемого элемента управления.2. Это можно сделать и с медиа-запросами. Вы создаете разные таблицы стилей для разных типов устройств или разрешений. Попробуйте погуглить это.
Ответ №2:
Я уверен, что вы преодолели эту проблему, поскольку этому вопросу пару месяцев, но я подумал, что предложу то, над чем я работаю, для проблемы того же типа.
Проблема: мне нужен сайт, который был бы приемлем на мобильных устройствах, планшетах, больших и маленьких экранах рабочего стола.
Решение:
-
Мультимедийные запросы CSS — очевидный выбор, позволяющий странице масштабироваться и «реагировать» на окно просмотра пользователя. Прямо сейчас наблюдается огромный толчок и несколько интересных выступлений относительно адаптивного дизайна, адаптивных изображений и т.д. Сначала я разрабатываю дизайн для мобильных устройств (еще один толчок) и использую медиа-запросы для изменения макета / видимого содержимого по мере увеличения экрана.
-
Затем возникает большая проблема с 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');
}