D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

      Как сделать кнопку «Полная версия сайта» для адаптивного дизайна?

         Хоть я и стараюсь верстать сайты так, чтобы при повороте «боком» посетитель получал полную версию сайта. Но регулярно возникают вопросы - как сделать кнопку для переключения к полной версии сайта.
         Самое интересное, что это не совсем очевидно именно для адаптивного дизайна. У него нет как таковой полной версии. Все зависит от ширины экана и размера контента.

         Но сейчас я покажу самый простой способ и даже приведу готовый скрипт.
         В данном случае мы берем мета тег 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, а начальный масштаб нужно уменьшить.
         При втором клике куки стираются и страница вновь обновляется. В принципе, все параметры можно настроить.

         Да, этот скрипт подойдет только для адаптивной верстки. Максимум - резиновой. Для сайтов с мобильной версией и сайтов с заменой шаблона нужно использовать другие варианты.

         
         
Главная, 1,
( 44 )