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 в котором будут стили из второго варианта.

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

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

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

    Ваш ответ

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