Как увидеть мобильную версию сайта в браузере, если сайт просто масштабируется?

Question

[doctorcat]

Приветствую, коллеги! Столкнулся с такой вещью, есть сайт:
new.tervolina.ru
у него с телефона отображается мобильная версия, а вот в браузере при использовании инструментов разработчика он просто масштабируется. А мне нужна именно мобильная версия через хром, так как я хочу глянуть css стили, сайт качественно сделан. Раньше с такой проблемой не встречался. Хотел бы узнать, кто и как выходит из положения. Поделитесь опытом :)

Comments

[jorshjorsh95]

обнови страницу когда включил режим "тест адаптивного дизайна"

[xmoonlight]

jorshjorsh95, без вариантов там)

Answer 1

[Александр]

Подмените строку User-Agent и очистите куки сайта (так как сайт запоминает при первом входе устройство пользователя). Тогда увидите мобильную версию.

Comments

[doctorcat]

Благодарю! Элементарно и просто, то что нужно было!

Answer 2

[LuidgiVamp]

Кстати, помогает просто нажать ctrl+f5 при открытой вкладке разработчика, с мобильной версией.

Comments

[doctorcat]

Очень сложно понять, что побуждает людей заниматься некропостингом в темах, на которые автор выбрал правильный ответ и описал почему остальные не правильные. Может проблема в интеллекте, может в чувстве собственной важности. В любой случае. Откройте глаза, и промотайте вверх. Потом посмотрите внимательно вопрос, далее внимательно посмотрите ответ, который был выбран решением. А свою бредятину лучше удалите. Что бы других людей с толку не сбивать, как и комментатор выше, который до сих пор уверен что гугл неправильно работает и по факту ничего сказать так и не смог. Ещё раз большое спасибо Александр за его внимательность и опыт в решении данных вопросов.

[LuidgiVamp]

doctorcat, Что за комментарий, удали его, возьми проверь и увидишь что ctrl+f5 работает, на яндекс и на других крупных сайтах.

Answer 3

[Anton B]

Comments

[doctorcat]

и ? это не работает

[mletov]

doctorcat, как раз все правильно. Кнопка на хромовской панели подменяет алгоритм рендеринга с десктопного на мобильный. А какое-нибудь расширение (у меня, например, User-Agent Switcher) присылает нужный User Agent

[doctorcat]

mletov, где находятся инструменты разработчика я знаю и как ими пользоваться тоже. Вопрос мой перечитайте. А потом решение на него и поймёте, что нужно было. А этот ответ не в тему, его автор не удосужился прочитать вопрос внимательно.

Answer 4

[xmoonlight]

Судя по всему, там определение мобильности по User-Agent'у.
Это - неправильно!

А вообще - Ctrl+Shift+M (Opt+Cmd+M) в любом браузере и если не работает мобильный вид сайта, то это нужно исправлять в серверном (back-end) коде на веб-сервере.

Comments

[doctorcat]

Вы не правильно меня поняли, я не разработчик этого сайта. И у меня нет доступа к back-end так бы я уже давно бы всё глянул :)

[xmoonlight]

doctorcat, тогда только подмена заголовка

[Donald_Duck]

Судя по всему, там определение мобильности по User-Agent'у.
Это - неправильно!

Т.е. многие крупные сервисы, например, майл, яндекс и т.д. работают не правильно определяя user-agent для того чтобы отправить пользователя на мобильную версию сайта?

[xmoonlight]

Donald_Duck, Есть 2 места с юзер-агент: в заголовках HTTP(S)-запроса и при вызове функции внутри JS. Вы про какое место говорите?

[Donald_Duck]

xmoonlight, Первый вариант, хотя про второй тоже бы интересно было услышать.

[xmoonlight]

Donald_Duck, Про первый - откуда информация? Тестили лично?

[Donald_Duck]

xmoonlight, Да, лично. Вы на вопрос-то ответите?)) А то пока что на свой вопрос вместо ответа получил кучу других вопросов.

[xmoonlight]

Donald_Duck, Да. Неправильно. Если они работают так, как Вы ответили.
Мобильный клиент или нет - нужно определять по возможностям и характеристикам самого устройства(а не по HTTP(S) заголовку User-Agent).
В браузере (внутри контейнера WebView) - это можно сделать только через javascript.

Про второй вариант:
Грузится прелоадер (js), определяются параметры клиентского устройства и в зависимости от этого грузится нужная разметка и контент.
Следующий шаг обработки представления: правила CSS стилей (на основе @media) и нужный js для рендеринга итогового представления.

[Donald_Duck]

xmoonlight, Спасибо, было очень интересно узнать, что в крупных компаниях работают люди не понимающие как правильно нужно определять устройство пользователя))

[xmoonlight]

Donald_Duck, Крупная - не значит умная! ))))
Если устройство само запросило версию контента для мобильного представления, указав в заголовках ДОПОЛНИТЕЛЬНО Vary: User-Agent, тогда это уже 50% вероятности того, что устройство - мобильное.
Но не на все 100%...

[LuidgiVamp]

xmoonlight, Ну да, и гугл не правильно работает?)

[xmoonlight]

LuidgiVamp, Какого ответа Вы ожидаете?)))

[LuidgiVamp]

xmoonlight, Просто когда Вы заходите с мобильного он все верно распознает.