Mystile woocommerce полная версия сайта на гаджетах
Установка в гаджетах «Показывать полную версию сайта» ни к чему не приводит. Думалось, что при данной установке, гаджет будет игнорировать «@media only screen«, но такого не происходит. Как заставить Mystile работать на смартфонах в полной версии, а не адаптированной под гаджеты? Понятно, что можно удалить все «@media only screen», но это не вариант, поскольку пользователь должен иметь возможность сам выбрать: использовать полный сайт или адаптированный.
Спасибо,
http://www.casaanna.ru/
Я прописал установки для разных разрешений экрана.
Попробуйте уменьшать ширину окна браузера.
Ваш совет предусматривает наличие на странице ссылки «Полная версия сайта». Но как обойтись без этого? Т.е. средствами самогО смартфона/планшета. В меню гаджетовского браузера Хром (к примеру) есть пункт, где можно поставить галочку «Полная версия». Что задействуется при её нажатии? Что нужно прописать в стилях для этой функции браузера гаджетов?
Или отменить все эти адаптации и тупо всегда показывать полную версию для всех устройств?
Как обычно делается? Нужны эти навороты вообще кому-нибудь?
Для реализации потобного можно пойти двумя путями, но скажу сразу лучше эти два способа объединить в один.
- Существуют мета теги (которые вставляются в <head></head>). <meta name=»MobileOptimized» content=»1000″> и <meta name=»viewport» content=»width=1000″>. Два эта тега в буквальном смысле говорят браузеру отобрази мне страницу так, как она выглядит на 1000px шириной, при условии что окно браузера меньше 1000px. И <meta name=»viewport» content=»width=device-width, initial-scale=1″> который говорит — отобрази мне страницу во всю ширину дивайся с зумом 0.
- Css стили
@media (max-width: 1000px) { @-ms-viewport { width: 1000px; } @-moz-viewport { width: 1000px; } @-o-viewport { width: 1000px; } @-webkit-viewport { width: 1000px; } @viewport { width: 1000px; } }
Эти стили говорят браузеру, если ширина окна меньше 1000px, отобрази мне страницу как на 1000px.
Действия этих двух методов можно наглядно увидеть в Internet Explorer, что бы не заходить на сайт то с мобилы то с компа, в IE это работает и на компе.
Так вот. Как вариант По нажатию на кнопку хочу использовать мобильную версию сайта в <head></head> вставлять <meta name=»viewport» content=»width=device-width, initial-scale=1″> иначе — <meta name=»MobileOptimized» content=»1000″> и <meta name=»viewport» content=»width=1000″> и подключать css в котором будут стили из второго варианта.
Если ваш сайт адаптирован под мобильные, зачем вам отображать полную версию? И к тому же если ваш сайт адаптирован, значит вы ни как, не меняя разметку и стили, не сможете сделать так, что бы отображалось как на компе. Проще говоря, в текущем состоянии с наска не получится сделать. Придётся попотеть) по поводу настроек браузера, ни разу не сталкивался и если честно ни разу не видел как это работает)