Как посмотреть мобильную версию сайта через компьютер
Admin 10.03.2018 — 18:48 2 42373+
размер текста
Благодаря адаптивному дизайну, сайт можно просматривать на различных устройствах с любым разрешением экрана. И хотя такой шаблон является универсальным решением для представления контента конечному пользователю, в сети по прежнему можно встретить отдельную версию сайта для мобильных устройств.
Мобильная версия сайта позволяет владельцу реализовывать более широкий спектр элементов веб-дизайна. В тоже время, её разработка практически целиком проходит из интерфейса компьютера, что затрудняет предварительный просмотр внесённых ранее изменений. Можно держать под рукой смартфон или всё-таки попытаться открыть мобильную версию сайта с настольного ПК.
Содержание статьи:
Как посмотреть мобильную версию сайта через компьютер?
Сразу возникает вопрос, а в чём же сложность? В отличие от адаптивного дизайна, мобильный шаблон — это отдельный набор файлов и стилей, который доступен только пользователям мобильных устройств. Такая избирательность реализуется путём определения соответствия параметра «user-agent».
То есть, прежде чем загрузить какую-либо веб-страницу, сайт сверяется с параметрами пользовательского браузера, уже исходя из этого выдаёт один или другой вариант. Например, сайт получает user-agent — “firefox”, значит отрабатывается загрузка десктопной (полной)версии сайта. Если же user-agent — “Android”, то сайт понимает, что требуется открыть мобильную версию сайта.
Через браузер Firefox
Чтобы посмотреть сайт как мобильный пользователь из браузера Mozilla Firefox, следует обратиться к встроенным инструментам веб-разработки. Для этого открываем сайт и в панели меню (сверху / можно вызвать клавишей «Alt») переходим по пути:
Инструменты ? Веб-разработка ? Адаптивный дизайн
Видим, что сайт изменился вместе с разрешением активной области экрана. Выбираем из списка интересующее устройство на базе мобильной операционной системы и проверяем работоспособность сайта.
Через браузер Chrome
Если вы активный пользователь браузера Google Chrome, то предварительно устанавливаем расширение с говорящим названием «User-Agent Switcher for Chrome». А далее обращаемся к новому элементу в панели сверху (слева от «меню параметров») — смайлик в очках.
Щелчком мыши разворачиваем список доступных агентов. Выбираем одну из популярных мобильных ОС Android или iOS, и сайт преобразовывается на глазах. По окончании работы с мобильной версией сайта не забудьте перейти обратно на агент «Chrome / default».
Вместо послесловия
Таким образом, можно открыть любой мобильный сайт. Благодаря описанным возможностям, в прошлой статье нам удалось посетить мобильную версию Instagram и добавить новые фото в свой профиль. А как вам удалось разрешить проблему полной и мобильной версии сайта?
поделитесь с друзьями:
Как зайти в мобильную версию ВКонтакте
Мобильная версия ВК — это сайт, которым можно пользоваться через браузер телефона или планшета. Он специально предназначен для мобильных устройств с небольшими экранами. Это НЕ мобильное приложение, но выглядит похоже. Как войти на него?
Если тебе нужно мобильное приложение ВК (отдельная программа на телефон), это здесь: Как скачать и установить приложение ВКонтакте на телефон.
Нужно иметь браузер на своем телефоне или планшете — это программа для просмотра сайтов. Обычно она уже установлена и называется просто «Браузер». Популярные бесплатные браузеры — Хром, Файрфокс, Сафари, Опера. Рекомендуем Хром, с ним меньше всего проблем. Для самых старых телефонов есть Опера Мини.
В любом браузере есть адресная строка. В нее вводится адрес сайта, который ты хочешь открыть. Чтобы открыть мобильную версию ВК, нужно нажать на эту строку и ввести адрес
m.vk.com
Чтобы войти на свою страницу ВК, потребуется авторизоваться, то есть ввести свои логин и пароль. Они вводятся в поля Телефон или email и Пароль. После ввода нужно нажать Войти.
Так выглядит вход в мобильную веб-версию сайта ВК в браузере на телефоне
Возможно, ты уже авторизован в ВК в мобильном приложении на этом же телефоне, но сайт ничего об этом не знает и поэтому запрашивает твои учетные данные.
Внимание! Не нажимай Зарегистрироваться
Если забыл пароль, придется восстановить доступ одним из стандартных способов:
- Восстановление доступа ВКонтакте по СМС
- Восстановление доступа ВКонтакте, если нет привязанного номера телефона
Зачем нужна мобильная версия ВК?
- Если возникли какие-то проблемы с мобильным приложением, можно зайти в мобильную версию сайта. Это позволит сделать то, что хотел, а разбираться с проблемами можно будет потом.
- Часто в мобильном приложении бывают проблемы с восстановлением доступа или разблокировкой страницы. В этом случае, если доступа к компьютеру нет, рекомендуется попробовать сделать то же самое через мобильную версию сайта. В идеале лучше делать это через полную версию, войти в которую можно и с телефона, но будет мелко и неудобно.
- Мобильная версия сайта хорошо работает на старых телефонах, на которые нельзя установить последнюю версию приложения или она глючит. См. также ВК не поддерживается на вашем устройстве. Что делать?
- Мобильная версия позволяет пользоваться ВК на телефонах, для которых вообще нет приложения ВК или оно уже не поддерживается (Виндоус Фон, Симбиан).
- Мобильная версия напоминает более старую версию мобильного приложения, где еще не было клипов и многих ненужных вещей, которые мешают. Но при этом в мобильной версии работает большинство функций ВК, она достаточно часто обновляется и в ней даже есть темная тема оформления.
Как сделать иконку мобильной версии ВК на телефоне?
В браузере Хром, открыв m.vk.com, вызови меню кнопкой ⋮ (три точки) и выбери Добавить на главный экран. У тебя появится новая иконка (кнопка) в телефоне на рабочем столе, которая сразу будет открывать мобильную версию ВК на весь экран, как обычное приложение. Это называется «веб-приложение».
Иконка, открывающая мобильную версию ВК, как будто это отдельное приложение
Как сделать, чтобы по ссылке открывалась мобильная версия ВК, а не полная?
В начале ссылки перед vk.com нужно добавить букву m и точку.
Пример
Было https://vk.com/vhod_ru
Стало https://m.vk.com/vhod_ru
Этим же способом можно исправить адрес в адресной строке браузера, чтобы открыть мобильную версию той страницы, на которой ты находишься. Надо нажать на адресную строку, добавить букву m и точку перед vk.com, а затем нажать Enter на клавиатуре (или кнопку
Что делать, если в мобильной версии сайта что-то не работает?
- Установи на телефон другой браузер и зайди в мобильную версию сайта в нем.
- Попробуй очистить все временные данные браузера или удалить его и установить заново.
- Попробуй мобильное приложение ВК.
- Попробуй полную версию сайта ВК.
Смотри также
- Как скачать и установить приложение ВКонтакте на телефон
- Как зайти в полную версию ВКонтакте
- Как вернуть старую версию ВКонтакте
- Где в новой версии ВКонтакте настройки, мои ответы, музыка, дни рождения, выход, статистика…?
- Как пользоваться ВКонтакте? — Все советы
В начало: Как зайти в мобильную версию ВКонтакте
Вход.ру
Как быстро открыть мобильное представление страницы в настольном браузере?
спросил
Изменено 4 месяца назад
Просмотрено 35 тысяч раз
Поскольку сейчас мы находимся в мире мобильных устройств, становится все более и более важным иметь возможность легко тестировать веб-сайты на мобильных телефонах или на эмулированных мобильных телефонах.
Как открыть мобильное представление веб-сайта из браузера настольного компьютера?
- браузер
- В Windows/Linux нажмите Ctrl + Shift + M
- В macOS нажмите опция + команда + M
Вы также можете найти пункт меню в разделе («Инструменты»), «Веб-разработчик», «Режим адаптивного дизайна».
Сначала необходимо открыть «Инструменты разработчика»:
- В Windows/Linux нажмите Ctrl + Shift + I или просто F12
- В macOS нажмите опция + команда + I
Когда инструменты разработчика открыты и сфокусированы, вы можете включить эмуляцию устройства:
- В Windows/Linux нажмите Ctrl + Shift + M
- В macOS нажмите команда + shift + M
На панели инструментов разработчика есть небольшая кнопка, которая включает эмуляцию устройства, если вы предпочитаете нажимать кнопку, а не сочетание клавиш.
Похоже, Apple по умолчанию отключила сочетание клавиш для входа в режим адаптивного дизайна. Вы можете следовать этому руководству по настройке сочетания клавиш для него.
Вы можете найти пункт меню, нажав «Разработка», «Войти в режим адаптивного дизайна». Если вы не видите пункт меню «Разработка», вам необходимо включить его, открыв «Настройки», «Дополнительно» и отметив «Показать меню «Разработка» в строке меню».
6
Ответ Флимма на 100% правильный. На всякий случай помнить ярлыки слишком много хлопот, эта синяя кнопка в инструментах разработчика для переключения между просмотром в Интернете и просмотром на мобильном телефоне/планшете:
Или с Firefox:
После включения панели инструментов устройства вы можете выбрать марку и модель устройства. устройство, которое вы хотите эмулировать, из выпадающего меню.
6
В целях тестирования я использую следующие веб-сайты:
- http://www.jamus.co.uk/demos/rwd-demonstrations/
- http://mattkersley.com/responsive/
Оба вышеперечисленных сайта позволяют мне просматривать мое веб-приложение на устройствах разной ширины.
Вы можете установить пользовательский агент и размер окна из командной строки или запустить конфигурацию ярлыка.
Например:
& "C:\Program Files\Google\Chrome\Application\chrome.exe" --new-window --window-size=375,812 --user-agent="Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, например Gecko) Chrome/87.0.4280.67 Mobile Safari/537.36" --user-data-dir=C:\workspace\tmp\chrome https://google.com
Флаг --user-data
является обязательным для выполнения этой работы. Создайте для него папку.
Добавьте расширение «переключатель пользовательского агента» в свой браузер и укажите мобильный пользовательский агент. Если сайт умный достаточно, он послужит вам мобильной оптимизированной версией.
Я не буду рекомендовать какое-либо конкретное расширение. В идеале должны быть встроенные предустановки для мобильных браузеров и возможность включать или отключать переключение пользовательского агента для каждого веб-сайта.
4
Приведенные выше ответы отлично подходят для тех, кто любит работать с одним браузером или имеет ограниченное «рабочее пространство» на рабочем столе (например, один монитор менее 21 дюйма с низким разрешением) 9.0005
На самом деле есть еще более интересное решение, которое я недавно обнаружил: https://blisk.io/
Я воздержусь от использования (вроде) «партнерской ссылки» для какой-либо личной выгоды (есть на основе системы», которую вы можете заработать кредиты, чтобы получить такие вещи, как бесплатное «командное облачное пространство» и «премиум-функции» для использования с ним), но Blisk на самом деле довольно эффектный.
Этот «браузер, созданный для разработки» на основе Chromium предоставляет множество способов демонстрации страницы на различных устройствах с вертикальной «панелью» с ЛЕВОЙ стороны, так же, как вы видите, что в инструментах разработчика Chrome по умолчанию используется правая вертикальная колонка.
Это работа. Несмотря на то, что у его «расширенной функциональности freemium есть некоторые ограничения», он по-прежнему очень хорошо работает для «предварительного просмотра» как ПК, так и мобильных версий ваших страниц / сайтов в параллельном сравнении. Платные функции также кажутся довольно привлекательными, если вы работаете в удаленных командах (хотя я лично думаю, что нужна лучшая программа «тест-драйва», прежде чем зацепить людей ежемесячной платой).
Полное раскрытие: существует ЧРЕЗВЫЧАЙНО раздражающий «ограничение времени» в день в части предварительного просмотра мобильных устройств (переключается между открытием и закрытием с помощью значка справа от адресной строки — измените «предварительный просмотр устройства» с крошечной ссылки на меню в правом верхнем углу «Показать список устройств»).
BliskDemoScreenshot
Также: Я нашел несколько действительно отличных трюков с расширениями браузера, такими как 2 разных «переключателя агента пользователя» из Chrome/Firefox, которые идут немного дальше, позволяя вам переключаться между строками пользовательского агента браузера различных операционных систем и браузеров. для них.
Я предпочитаю вариант «esolutions.se» из-за того, как легко добавить в список пользовательские строки пользовательского агента для любого количества настроек (также работает в автономном режиме, что может быть удобно в некоторых случаях): https://chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae
В любом случае, это мои 2 цента. :Р
1
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie
.Google Chrome отображает только мобильную версию моего сайта в Ubuntu 15.10. Мне нужна только настольная версия
Задавать вопрос
спросил
Изменено 6 лет, 11 месяцев назад
Просмотрено 4к раз
У меня есть веб-сайт WordPress. Он отображается на моем ноутбуке (Toshiba Satelltie A45) как мобильный сайт только в Ubuntu 15.10 в Google Chrome и FF.
Однако Kubuntu 14.10 правильно показывает его на том же ноутбуке, что и десктопную версию в Google Chrome.
Я не нашел работающего решения, которое заставляет Chrome показывать сайт в правильной настольной версии.
Кто-нибудь знает решение, пожалуйста?
Все исправления, предложенные в сети, протестированы безуспешно.