Поскольку сейчас мы живем в мире мобильных устройств, становится все более важным иметь возможность легко тестировать веб-сайты на мобильных телефонах или на эмулируемых мобильных телефонах. Я сотрудничаю с людьми, которые работают над веб-сайтами и предложениями в социальных сетях, и я хотел бы призвать их регулярно открывать веб-сайты из своих настольных браузеров в мобильном представлении. Я специально думаю о встроенной в браузере функции «мобильного просмотра», которая часто скрыта среди всех других инструментов разработчика, которые предоставляет браузер, но я рад рассмотреть все, что так же быстро настроить.

Как вы можете открыть мобильное представление веб-сайта из браузера на рабочем столе?

Fire Fox:

• В Windows / Linux нажмите Ctrl+ Shift+M
• В macOS нажмите option+ command+M

Вы также можете найти пункт меню в («Инструменты»), «Веб-разработчик», «Режим адаптивного дизайна».

Хром:

Сначала вам нужно открыть «Инструменты разработчика»:

• В Windows / Linux нажмите Ctrl+ Shift+ Iили простоF12
• В macOS нажмите option+ command+I

Когда инструменты для разработчиков открыты и сфокусированы, вы можете открыть панель инструментов устройства:

• В Windows / Linux нажмите Ctrl+ Shift+M
• В macOS нажмите command+ shift+M

Вы также можете найти пункт меню, открыв инструменты разработчика («Дополнительные инструменты», «Инструменты Develepor»), а затем щелкнув значок, похожий на мобильный телефон, перед таблицей «Переключить панель инструментов устройства».

Сафари:

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

Вы можете найти пункт меню, нажав «Разработка», «Войти в режим адаптивного дизайна». Если вы не видите пункт меню «Разработка», необходимо включить его, открыв «Предпочтения», «Дополнительно» и отметив «Показать меню« Разработка »в строке меню».

Край:

• Нажмите, F12чтобы открыть инструменты разработчика, а затем Ctrl+, 7чтобы открыть «вкладку Эмуляция». Настройте устройство, которое вы хотите эмулировать.

Вы можете открыть инструменты разработчика с помощью мыши, щелкнув правой кнопкой мыши внутри веб-страницы и выбрав «проверить элемент».

Ответ Flimm на 100% правильный. На всякий случай запоминание ярлыков слишком хлопотно, вот эта синяя кнопка в инструментах разработчика для переключения между веб-представлением и представлением для мобильных устройств / планшетов:

Или с Firefox:

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

Для тестирования я использую следующие сайты: -

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Оба сайта позволяют просматривать мое веб-приложение на нескольких устройствах.

Добавьте расширение «User Agent Switcher» в свой браузер и укажите мобильный пользовательский агент. Если веб-сайт достаточно умен , он подойдет для мобильной версии.

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

Приведенные выше ответы отлично подходят для тех, кто любит придерживаться одного браузера или имеет ограниченное «рабочее пространство» на рабочем столе (например, один монитор меньше 21 дюйма с низким разрешением).

На самом деле есть еще более интересное решение, которое я недавно обнаружил: https://blisk.io/

Я воздержусь от использования (своего рода) «партнерской ссылки» для какой-либо личной выгоды (существует «система на основе токенов», на которой вы можете зарабатывать кредиты, чтобы получить такие вещи, как бесплатное «командное облачное пространство» и «премиум-функции» для использования с это), но Blisk на самом деле довольно привлекательный.

Этот основанный на Chromium «браузер, созданный для разработки» предоставляет множество способов демонстрации страницы на различных устройствах с вертикальной «панелью» на левой стороне, так же, как вы видите Chrome Developer Tools по умолчанию в правой вертикальной колонке.

Это работа, взгляд. Несмотря на некоторые ограничения в его «расширенной функциональности freemium», он все равно очень хорошо работает для «предварительного просмотра» как ПК, так и мобильных версий ваших страниц / сайтов при параллельном сравнении. Платные функции тоже кажутся весьма привлекательными, если вы работаете в удаленных командах (хотя я лично считаю, что для того, чтобы подсказать людям ежемесячную стоимость, нужна лучшая программа «тест-драйв»).

Полное раскрытие: на странице предварительного просмотра для мобильных устройств ЧРЕЗВЫЧАЙНО раздражает «ограничение по времени» в день (переключает открывать / закрывать с помощью значка справа от адресной строки - изменить «предварительный просмотр устройства» с крошечной ссылки на меню в правом верхнем углу «Показать список устройств»).

BliskDemoScreenshot

Кроме того: я нашел несколько действительно изящных трюков с расширениями браузера, такими как 2 разных "User-Agent Switcher" из Chrome / Firefox, которые идут немного дальше, позволяя вам переключаться между строками user-agent браузера различных операционных систем и браузеры для них.

Я предпочитаю вариант «esolutions.se» из-за того, как легко добавлять пользовательские строки пользовательских агентов в список для любого количества настроек, которое вы когда-либо захотите (работает также в автономном режиме, что может быть удобно в некоторых случаях): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Во всяком случае, это мои 2 цента. :П