Как сделать кнопку «Полная версия сайта» для адаптивного дизайна?
Хоть я и стараюсь верстать сайты так, чтобы при повороте «боком» посетитель получал полную версию сайта. Но регулярно возникают вопросы - как сделать кнопку для переключения к полной версии сайта.
Самое интересное, что это не совсем очевидно именно для адаптивного дизайна. У него нет как таковой полной версии. Все зависит от ширины экана и размера контента.
Но сейчас я покажу самый простой способ и даже приведу готовый скрипт.
В данном случае мы берем мета тег meta name=viewport и меняем в нем «ширину сайта, равную ширине устройства» (width=device-width) на width=1024. Для дополнительного эффекта я уменьшил начальный масштаб с 1 на 0.1 (initial-scale=0.1).
Получился такой вот простой скрипт:
<? if (isset($_COOKIE
['mobile'])) { ?><meta name=viewport content="width=device-width, initial-scale=1"><? } else { ?><meta name=viewport content="width=1024, initial-scale=0.1"><? } ?> <? if (isset($_COOKIE
['mobile']) and $_COOKIE['mobile'] =="no") { ?><a href="" onclick="SetCookie ('mobile=yes', 0);">На обычную версию</a><? }else{ ?> <a href="" onclick="SetCookie ('mobile=no', 30);">На мобильную версию</a><? } ?> <script>
//Ставим Куки
function SetCookie(id, days){
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+"; path=/; expires="+ws.
toGMTString(); }
</script>
Для удобства тут используется связка из PHP и JavaScript. Первая часть ставится вместо мета тега viewport в заголовке, а вторая - там, где нужно вывести кнопку переключения.
По клику мы ставим куки на 30 дней, а пустая ссылка обновляет страницу. После перезагрузки показывается другой мета тег, говорящий мобильному устройству, что сайт адаптирован под ширину 1024px, а начальный масштаб нужно уменьшить.
При втором клике куки стираются и страница вновь обновляется. В принципе, все параметры можно настроить.
Да, этот скрипт подойдет только для адаптивной верстки. Максимум - резиновой. Для сайтов с мобильной версией и сайтов с заменой шаблона нужно использовать другие варианты.
