Переключение между мобильной и десктопной версией сайта в адаптивной верстке.

-Dima- · 2015-03-27T09:44:10.0000000Z

Известно, что основным недостатком адаптивного дизайна, является отсутствие перехода от мобильной к десктоптной версии сайта. Многим посетителям (в том числе и мне) при заходе на сайт с телефона/планшета удобнее работать с десктопной версией сайта, а в случае адаптивного дизайна выбор собственно не велик, и переключиться зачастую нет возможности. Поскольку мобильную версию сайта, лично мне, делать было не охота, я некоторое время думал над костылем перехода между мобильной и десктопной версиями сайта в адаптивной верстке. В Сети встретил два javascript'а которые реализовывали подобный переход(реализовано через фиксацию ширины в viewport), но как-то результат меня не очень радовал, поскольку не всегда нормально они отрабатывали. Поэтому набросал свой вариант перехода от адаптивной к десктопной версии сайта, возможно кому-то будет полезно мое решение. Суть в том, что я выношу все медиа запросы из основного файла стилей и не подгружаю их если пользователь намеренно включил десктопную верстку. Данный пример пишу на основе шаблона для wordpress: в header.php в самом начале файла <?php $url = get_permalink(); if ($_POST ["m_template"] == "yes"){ setcookie('mobile_template', "yes", time() + 60*60*24*30, '/'); header("Location: $url"); exit; }elseif($_POST ["m_template"] == "no"){ setcookie('mobile_template', "no", time() + 60*60*24*30, '/'); header("Location: $url"); exit; } ?> в том же файле между тегами <head></head>: <?php if($_COOKIE['mobile_template'] == "yes" || $_COOKIE['mobile_template'] == "") :?> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .... ...описываете все свои медиа запросы здесь... @media (min-width:960px) {...} @media (min-width:768px) and (max-width:959px){...} ... </style> <?php endif;?> В файл footer.php(ну или где захочется) вставляем простенькую кнопку/форму/ которая будет переключать мобильную/десктопную верстку. <form action="<?php the_permalink(); ?>" method="POST"> <?php if ($_COOKIE['mobile_template'] == "no") : ?> <input type="hidden" name="m_template" value="yes" /> <input type="submit" class="linkbutton" value="Switch to Mobile version" /> <?php elseif ($_COOKIE['mobile_template'] == "yes" || $_COOKIE['mobile_template'] == "") : ?> <input type="hidden" name="m_template" value="no" /> <input type="submit" class="linkbutton" value="Switch to Desktop version" /> <?php endif;?> </form> Собственно, вот и все. Решение может и не очень изящное, но меня устраивает :) Если у кого есть вопросы, критика или предложения по улучшению, с радостью отвечу.

213

solomko

9 апреля 2015, 14:57

#11

Можете посоветовать какой-то плагин, который переключает тему?

30% всех моих доходов идут отсюда (http://www.sape.ru/r.d5e628f4c4.php) Когда-то тут была ссылка рефки Рrofit-partner - R.I.P милый друг Поднимаю показатели сайтов, стабильный доход (http://gogetlinks.net/?inv=gypp40)

-

133

-Dima-

9 апреля 2015, 15:13

#12

К сожалению не могу. Не возникало еще необходимости в этом.

237

D.iK.iJ

9 апреля 2015, 16:20

#13

Сделал на сайтах адаптивный дизайн начиная с 500px кажется. В остальном - просто тянущийся.

Так вот, 100% работающий метод переключения на нормальную версию - повернуть экран боком! Работает отличено для всех телефонов что пробовал.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

Google с 21 апреля А у вас адаптивный Оптимизация сайта для планшетов

W

29

wolfmod

30 июня 2015, 20:01

#14

Кстати, в продолжение ТС

...в том же файле между тегами <head></head>:

Код:

<?php if($_COOKIE['mobile_template'] == "yes" || $_COOKIE['mobile_template'] == "") :?>

....

...можно поставить ссылку на css файл
...<link rel="stylesheet" type="text/css"

</style>

<?php endif;?>

тоже работает

Спасибо!

Влияет ли на ранжирование Мобилопригодность(c) - новый алгоритм Сообщить роботу о моб.

Все что нужно знать о DDоS-атаках грамотному менеджеру

Google: E-E-A-T не является фактором ранжирования