Собственно нужно сделать кнопку, которая переключает с адаптивной версии сайта на полную. То есть управлять viewport и отключать media queries. Как это сделать?
2 ответа
Можно при клике на кнопку убирать из мета-тега вьюпорта width=device-width
, необходимое для срабатывания медиа-выражений, и менять его на, например, width=1200
.
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=1200');
});
<button>Switch to full version</button>
-
Бред. Viewport тут не поможет. Meta теги рендаряться еще на этапе загрузки html. Тем более ваш пример не работает. Проверили хотя бы.– Vadizar24 янв 2017 в 13:47
-
К тому же, по правильному стили пишут Mobile First, то есть изначально стили пишутся как раз для мобильной версии. Так что ваш вариант неприемлем.– Vadizar24 янв 2017 в 13:59
-
вы сделали сразу несколько предположений, одно из них неверное, другое - необоснованное мнение. что касается динамической смены вьюпорта - вы проводили исследования? вот например статья еще 2011-го года quirksmode.org/blog/archives/2011/06/dynamically_cha.html кстати, как вы ожидали сработает поиск вьюпорта в сниппете? очевидно, что здесь будет выдавать ошибку. 24 янв 2017 в 14:01
-
-
эта ссылка не имеет ничего общего с объективными правилами написания кода. вы мне лучше докажите, что мой вариант не работает (можно даже ссылкой) и объясните на каком объективном основании минусуете ответ. 24 янв 2017 в 14:07
Тут несколько вариантов:
- Самый простой и понятный(хоть и не совсем отвечающий требованиям) - просто редиректить, кинув какой-нибудь маяк на будущее в куки, ибо кто то может захотеть открыть в новой вкладке, скинуть другу, или скинуть себе на мобилку, и сразу открыть там его в мобильной версии. Это более юзер-френдли.
- При нажатии добавить в body/(ко всем переключаемым элементам) класс
%classname%
, переписать селекторы вcss
под него. - При нажатии, в
head
у линка на файл стилейhref
- поменять на урл к файлу, для определенной версии сайта. Костыльно, лагуче, и вообще неприемлимо, как по мне.
-
-
@Vadizar - потому что это решение в принципе костыльно. Кому в здравом уме может понадобиться переключение сайта в динамике с полной на адаптивную версию? Также, 3й вариант во многом повторяет твой, те же яйца, только в профиль. И да, MobileFirst -уместен там, где он необходим, далеко не все и не вся следуют этому алгоритму.– SLy_huh24 янв 2017 в 14:11
-
@SLy_huh есть куча сайтов с подобным функционалом. Вот только реализовано это там через редирект на мобильную версию. А вариант с меда двери - очень даже ничего. Лучше редиректа. Кстати, в мобильном Safari по-умолчанию есть такой функционал. Работает он на эмуляции "большого" разрешения. Хотите сказать, что в Apple работают люди не в здравом уме?)– Vadizar24 янв 2017 в 14:14
-
@Vadizar чем лучше? Единственное, это возможность переключить сайт на лету. Но зачем? Никто не свапает версии сайтов по 30 раз на дню, чтобы это создавало такую проблему, как перезагрузка сайта.– SLy_huh24 янв 2017 в 14:18
-
@SLy_huh 1. Меньше ресурсов на поддержку такого вариант. 2. Исключает дубликаты контента для поисковиков. 3. Банальная экономия трафика для мобильных клиентов. 4. Скорость загрузки.– Vadizar24 янв 2017 в 14:19