Форум Сайтостроение Веб-строительство

Как сделать кнопку переключения с адаптивной версии на полную (пк) версию?

1 23
t1mkke
На сайте с 06.09.2012
Offline
82
t1mkke
#21

flugerov, внутри <head> прописываете это:

<?php if (!isset($_COOKIE['nomobile'])){ ?><link rel="stylesheet" href="/templates/vt_emake/css/responsive.css"><?php } ?>

<script type="text/javascript">

//Куки

function SetCookie(id, days){

var ws=new Date();

ws.setDate((days-0+ws.getDate()));

document.cookie=id+"; path=/; expires="+ws.toGMTString();

}

</script>

Если в <head> уже подключается responsive.css то удалите старое подключение, так как код выше будет подключать responsive.css

В том месте, где вам нужна кнопка отключения адаптивного дизайна прописываете это:

<a href="/" onclick="SetCookie('nomobile=on', '30');">Полная версия сайта</a>

eTarget 2011: Круглый стол Могут ли «плохие» входящие Optimization 2010: круглый стол
F
На сайте с 19.03.2014
Offline
10
flugerov
#22
t1mkke:
flugerov, внутри <head> прописываете это:
<?php if (!isset($_COOKIE['nomobile'])){ ?><link rel="stylesheet" href="/templates/vt_emake/css/responsive.css"><?php } ?>
<script type="text/javascript">
//Куки
function SetCookie(id, days){
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+"; path=/; expires="+ws.toGMTString();
}
</script>

Если в <head> уже подключается responsive.css то удалите старое подключение, так как код выше будет подключать responsive.css

В том месте, где вам нужна кнопка отключения адаптивного дизайна прописываете это:
<a href="/" onclick="SetCookie('nomobile=on', '30');">Полная версия сайта</a>

Отлично! Работает. Большое Вам и всем спасибо! Возможно кому-то тоже пригодится.

---------- Добавлено 05.06.2015 в 14:45 ----------

Тут еще возникают вопросы:

1. Как сделать, что бы можно было, по нажатию на ссылку <a href="/" onclick="SetCookie('nomobile=on', '30');">Полная версия сайта</a> перейти обратно на адаптивную версию?

2. Как сделать так, что бы ссылку было видно только на мобильном устройстве?

3. Как сделать, что бы при повторном заходе на сайт с мобильного, открывалась адаптивная версия?

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
D.iK.iJ
На сайте с 26.05.2013
Offline
225
D.iK.iJ
#23

1. Сделайте ссылку типа <a href="/" onclick="SetCookie('nomobile=off', '0');">Мобильная версия сайта</a> или <a href="/" onclick="SetCookie('nomobile=off', '-1');">Мобильная версия сайта</a>.

2. Например, добавить стили:

<style>
@media screen and (max-width: 650px) {#nomobile{display: none !important;}}
</style>

Ну и ссылку немного изменить: <a href="/" onclick="SetCookie('nomobile=on', '30');" id="nomobile">Полная версия сайта</a>

Тогда ссылка будет показываться только при ширине экрана меньше 650. Ну или если я вас не так понял, то еще можно тем же кодом PHP.

3. Куки можно поставить на 1 день: <a href="/" onclick="SetCookie('nomobile=on', '1');">Полная версия сайта</a>

Еще помню, что куки без времени стираются при выходе с сайта, но нужно экспериментировать. Либо поможет ссылка типа <a href="/" onclick="SetCookie('nomobile=on', '0');">Полная версия сайта</a> либо из скрипта убрать дату, но он будет не таким универсальным.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
F
На сайте с 19.03.2014
Offline
10
flugerov
#24
DiKiJ:
1. Сделайте ссылку типа <a href="/" onclick="SetCookie('nomobile=off', '0');">Мобильная версия сайта</a> или <a href="/" onclick="SetCookie('nomobile=off', '-1');">Мобильная версия сайта</a>.

2. Например, добавить стили:

Ну и ссылку немного изменить: <a href="/" onclick="SetCookie('nomobile=on', '30');" id="nomobile">Полная версия сайта</a>

Тогда ссылка будет показываться только при ширине экрана меньше 650. Ну или если я вас не так понял, то еще можно тем же кодом PHP.

3. Куки можно поставить на 1 день: <a href="/" onclick="SetCookie('nomobile=on', '1');">Полная версия сайта</a>
Еще помню, что куки без времени стираются при выходе с сайта, но нужно экспериментировать. Либо поможет ссылка типа <a href="/" onclick="SetCookie('nomobile=on', '0');">Полная версия сайта</a> либо из скрипта убрать дату, но он будет не таким универсальным.

1.То есть добавить еще одну ссылку? Разве нельзя сделать так, что бы один клик это был переход на Полную версию а второй переход обратно на Адаптивную версию? (В одной ссылке) Так как, это сделано на pa.ua

2. Я правильно понял, эти стили надо прописать в файле отвечающий за адаптивный дизайн? (в моем случае это responsive.css)

SeVlad
На сайте с 03.11.2008
Offline
1609
SeVlad
#25
flugerov:
Так как, это сделано на pa.ua

Там 2-е разные ссылки на 2-х разных страницах (мобильной и десктопной)

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
F
На сайте с 19.03.2014
Offline
10
flugerov
#26
SeVlad:
Там 2-е разные ссылки на 2-х разных страницах (мобильной и десктопной)

В моем случае на одной, так как, у меня адаптивный дизайн а не мобильная версия.

SeVlad
На сайте с 03.11.2008
Offline
1609
SeVlad
#27
flugerov:
В моем случае на одной

У меня начинают закрадываться сомнения в твоей адекватности восприятия окружающей действительности. Краткая хронология:

VoV@:
обычно они находятся по разным адресам, например: site.com и m.site.com
flugerov:
В адаптивных версиях, тоже стоят такие кнопки. Не обязательно мобильная. Вот Вам пример pa.ua
VoV@:
на этом сайте сервер формирует разные версии, в зависимости от GET-параметра.
SeVlad:
там, если посмотреть внимательнее урл на переключатель другой - http://pa.ua/?s5_responsive_switch_paua=X.

Ещё раз, резюмируя - в твоём примере разные урлы на разные версии:

SeVlad:
Там 2-е разные ссылки на 2-х разных страницах (мобильной и десктопной)

Что не ясно-то? А ты опять про одну. :(

Выше же люди тебе накидали вариантов как можно реализовать.

F
На сайте с 19.03.2014
Offline
10
flugerov
#28
SeVlad:
У меня начинают закрадываться сомнения в твоей адекватности восприятия окружающей действительности. Краткая хронология:




Ещё раз, резюмируя - в твоём примере разные урлы на разные версии:

Что не ясно-то? А ты опять про одну. :(
Выше же люди тебе накидали вариантов как можно реализовать.

Так и сделал, как рекомендовали. Но ссылки две отображались на одной странице.

1 23

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий