Mystile woocommerce полная версия сайта на гаджетах

Решено

Установка в гаджетах «Показывать полную версию сайта» ни к чему не приводит. Думалось, что при данной установке, гаджет будет игнорировать «@media only screen«, но такого не происходит. Как заставить Mystile работать на смартфонах в полной версии, а не адаптированной под гаджеты? Понятно, что можно удалить все «@media only screen», но это не вариант, поскольку пользователь должен иметь возможность сам выбрать: использовать полный сайт или адаптированный.

Добавить Комментарий
Ответ

Спасибо, pyatka!

http://www.casaanna.ru/
Я прописал установки для разных разрешений экрана.
Попробуйте уменьшать ширину окна браузера.

Ваш совет предусматривает наличие на странице ссылки «Полная версия сайта». Но как обойтись без этого? Т.е. средствами самогО смартфона/планшета. В меню гаджетовского браузера Хром (к примеру) есть пункт, где можно поставить галочку «Полная версия». Что задействуется при её нажатии? Что нужно прописать в стилях для этой функции браузера гаджетов?

Или отменить все эти адаптации и тупо всегда показывать полную версию для всех устройств? 
Как обычно делается? Нужны эти навороты вообще кому-нибудь?

Добавить Комментарий

Для реализации потобного можно пойти двумя путями, но скажу сразу лучше эти два способа объединить в один.

  1. Существуют мета теги (которые вставляются в <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.
  2. 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 в котором будут стили из второго варианта.

Добавить Комментарий

Если ваш сайт адаптирован под мобильные, зачем вам отображать полную версию? И к тому же если ваш сайт адаптирован, значит вы ни как, не меняя разметку и стили, не сможете сделать так, что бы отображалось как на компе. Проще говоря, в текущем состоянии с наска не получится сделать. Придётся попотеть) по поводу настроек браузера, ни разу не сталкивался и если честно ни разу не видел как это работает)

Добавить Комментарий

Ваш ответ

Размещая свой ответ, вы соглашаетесь с правилами сайта.