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

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

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

      Кнопка перехода с адаптивной версии на полную 2

         Недавно довел до ума, если сравнивать с простой первой версией. Очень хотелось поделиться :) многим нужно. Единственное, справиться без PHP не получилось.

         1) ?mobile - закрыть от индексации в robots! Без него на мобильных - адский кеш, с которым не справиться.
         2) Лучше не убирать адаптивные стили, а убирать только <meta name=viewport content="width=device-width, initial-scale=1">
         Но можно и то и то.
         3) Кнопка показывается на адаптивной версии. Или на полной, если есть куки. Связано с работой meta name=viewport. Иначе не перейти обратно будет.
         4) Можно добавить ширину просмотра для полной версии. Например: <meta name="viewport" content="width=1300, initial-scale=1">

         В шапку сайта (оставил место под эксперименты):
         
<? if (isset($_COOKIE['mob']) and $_COOKIE['mob']=="no") { ?>
<? } else { ?>
<meta name=viewport content="width=device-width, initial-scale=1">
<? } ?>


         Кнопка для футера, перед </body>. Стили можно вынести в отдельный файл. А вот скрипт - [B]нет[/B]. только если добавлять срабатывание только после загрузки.
         
<style>
#mob {margin: 0 auto !important; font-size: 1rem; width: 100%; height: 51px; text-decoration: none; line-height: 51px; background-color: #3292be; border-color: #007095; color: #fff; transition: background-color 300ms ease-out; text-align: center;}
#mob:hover, #mob:focus {background-color: #007095;}
</style>

<? if (isset($_COOKIE['mob']) and $_COOKIE['mob']=="no") { ?>
<a style="display: none; width: width: 100%;" href="?mobile" id="mob" onclick="SetCookie('mob=yes', 0);">Перейти на мобильную версию</a>
<? }else{ ?>
<a style="display: none; width: 100%;" href="?mobile=no" id="mob" onclick="SetCookie('mob=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();
}
if (document.cookie.indexOf("mob=no") != -1 || document.getElementsByTagName("body")[0].offsetWidth<=775) {
document.getElementById("mob").style.display='block';
}
</script>