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

Question

[nagge101]

Доброго дня. Делаю всегда верстку на Флексах.
Столкнулся с тем, что заказчик спросил, а почему не работает переход на полную версию при нажатии на телефонах этой заветной кнопки в браузере. Верстка FlexBox + Media запросы.

Может поможет кто, в чем проблема и как сделать. Примерно понимаю в чем причина, но не уверен. Как решить и т.д? На бутструпе такого не было.

Comments

[Сергей delphinpro]

Нифига себе. А эта кнопка разве работает? Сколько раз тыкал на разных сайтах — браузеру пофиг..

[nagge101]

Сергей delphinpro, ну вот как оказывается работает. Пример - сайт вк

Answer 1

[Dies Irae]

Очень интересный вопрос!
Почему не отображается полная версия - понятно. Медиа запросы формируют CSS в зависимости от ширины экрана, а даже с поставленной галочкой "Десктоп версия" ширина не меняется.
Нашел принцип работы фичи.
Вкратце, меняется user-agent request header.

Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19

Сверху какой был, снизу какой стал. Парсинг user-agent с detect.js. Если !mobile, то вручную форсим ширину экрана как для десктопа.
Очень костыль!

Еще попробуйте поиграть с cookie view-mode это:

var viewMode = getCookie("view-mode");
if(viewMode == "desktop"){
    viewport.setAttribute('content', 'width=1024');
}else if (viewMode == "mobile"){
    viewport.setAttribute('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
}

Answer 2

[mletov]

Есть 2 способа создания мобильной версии в рамках одного домена:
1) CSS + media query
2) Анализ USER_AGENT и подсовывание соответствующей версии на основе браузера пользователя

Я не знаю, как работает кнопка "полная версия" на телефонах, но подозреваю, что телефон просто подсовывает сайту десктопный USER_AGENT. Если адаптивность сделана первым способом, то сайту пофиг на эту кнопку.

(Дабы не офтопить, варианты с созданием мобильной версии или смешения выше перечисленных подходов не рассматривал)

Соответственно, анализируйте USER_AGENT и если он десктопный - убирайте из head вот эту строчку

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Answer 3

[igumenov]

При переходе на полную версию убирать