Могут ли медиа-запросы использоваться вместе с jquery mobile? - PullRequest
3 голосов
/ 22 декабря 2011

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

Однако я также изучил Jquery mobile и мне нравится пользовательский интерфейс, который они используют.

Мой вопрос: возможно ли объединить два? то есть. Могу ли я иметь веб-страницу, которая обычно отображается при просмотре на компьютере pc / mac, но когда ширина браузера упала ниже 320 пикселей (например), могу ли я переключиться на использование мобильного Jquery?

Я подумал, что это возможно, включив в мою страницу мобильные сценарии jquery вместе с атрибутами «роль данных», но включив таблицу стилей jquery mobile только в том случае, если браузер имеет определенный размер, например:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

Это вообще возможно? Я не могу сказать, пытаюсь ли я использовать Jquery Mobile для чего-то, с чем он не рассчитан? Должен ли я просто иметь совершенно отдельный сайт, т.е. http://m.mysite.com, который имеет автономный мобильный контент? Или возможно иметь адаптивный сайт?

Спасибо!

Ответы [ 3 ]

2 голосов
/ 22 декабря 2011
1 голос
/ 16 ноября 2012

На вопрос не был дан ответ, поскольку он был задан.

Вы не можете использовать JQM только на мобильном сайте, а не на настольной версии, используя только медиа-запросы CSS.Вам придется создавать совершенно разные сайты и перенаправлять.

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

Само демо JQM использует медиазапросы, чтобы превратить его в макет с двумя столбцами в браузерах для настольных компьютеров и планшетов и один столбец на телефонах.Проблемы, возникающие при этом: вся страница действует как страница, то есть элементы div, такие как переход боковых меню и перезагрузка с новой страницей (поэтому они используют только переход замирания).Обычная загрузка содержимого AJAX, которая не включает всю страницу, должна быть либо сделана так, чтобы охватить всю страницу, либо сделана на заказ вне обычного способа работы JQM.В некоторых случаях это может быть не так сложно, но это увеличит код JS и сделает некоторые приложения намного более сложными.Я также вижу, что CSS быстро выходит из-под контроля для более сложных проектов, чем демонстрация JQM.

1 голос
/ 22 декабря 2011

это очень интересный вопрос ...

Ответ зависит от таких факторов, как различие между двумя рисунками, такими как один ниже 320px, а другой выше этого.

Если разница огромна, неплохо было бы иметь отдельный мобильный веб-сайт ..

Но если разница минимальна, вы можете справиться с этим с помощью CSS Media Queries.

Вы можете объединить CSS Media Queries с адаптивным веб-дизайном для обработки экранов разных размеров.

...