Я хочу создать отзывчивый веб-сайт. Если браузер имеет мобильный размер, содержимое должно отображаться в виде списка стилей iPhone. Если браузер имеет размер рабочего стола, содержимое должно отображаться с вкладками:
Каков наилучший способ сделать это? Я не хочу использовать отдельные файлы для Mobile/Desktop. Я хочу, чтобы он был отзывчивым.
Вот некоторые из моих исследований.
Попытка 1: чистое решение для CSS.
Чистое решение CSS было бы лучшим, так как CSS предлагает медиа-запросы, что позволяет легко переключаться между макетами. CSS предлагает методы для создания вкладок. Но, похоже, он не предлагает метод для списка стилей iPhone. (Вы можете почти подделать его с помощью списка аккордеона, но это не приведет к тому, что пользователь будет на отдельной странице, например, в истинном приложении для iPhone).
Попытка 2: Решение JQuery (см. Fiddle)
- JQuery Mobile предлагает простой способ создать список стилей iPhone просмотров
- JQuery UI предлагает простой способ создать tabs.
- Enquire.js предлагает эквивалент Javascript для медиа-запросов.
В этой скрипте я попытался объединить JQuery Mobile и JQuery Ui. Enquire.Js используется для вызова необходимой библиотеки в зависимости от экрана.
Когда вызывается библиотека, она изменяет структуру dom. Таким образом, ненужная библиотека должна быть удалена, иначе, если пользователь изменит размер браузера (т.е. Переключится между мобильным рабочим столом), неиспользуемая библиотека нарушит причины конфликтов для вызываемой библиотеки.
В моей скрипке я пытался это сделать, но, похоже, это не работает:
$(document).ready(function() {
enquire.register("screen and (max-width: 600px)", function() {
$('script[src~="jquery-ui.js"]').remove();
$('link[rel=stylesheet][href~="jquery-ui.css"]').remove();
$('head').append('<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css'; return false;" />');
$('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');
$("#tabs").tabs("destroy");
}).listen();
enquire.register("screen and (min-width: 601px)", function() {
$('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
$('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();
$('head').append('<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'; return false;" />');
$('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');
$("#tabs").tabs();
}).listen();
});
Несмотря на то, что неиспользуемая библиотека удалена, она вызывает конфликты для новой библиотеки. Кроме того, вы должны изменить размер браузера перед вызовом любого из макетов. Если пользователь не изменяет размер браузера, содержимое будет нестировано.
Попытка 3: клонирование объектов (см. Fiddle)
Эта попытка аналогична попытке 2, за исключением загрузки страницы, она хранит DOM в переменной. Затем, когда пользователь изменяет размер браузера, существующий DOM заменяется на сохраненную DOM. Я выполнил схему здесь, но, похоже, она не работает. Домен просто удаляется вместо замены.
Я был бы признателен за любую помощь в этом, так как я рвал волосы, чтобы найти решение! (Я знаю, что задал вопрос, похожий на этот вопрос, но я чувствовал, что этот новый вопрос был достаточно разным, чтобы гарантировать новый пост.)
Попытка 4: Динамическое присвоение атрибутов данных
Jquery mobile использует атрибуты данных в метке, чтобы заставить скрипты работать. Я пробовал применять их динамически, поэтому они записываются только в документ, когда браузер имеет размер мобильного устройства. Однако, когда браузер изменен, вкладки рабочего стола все еще сломаны.
