Кнопка перехода с адаптивной версии на полную 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>
