Как быстро открыть страницу в мобильном браузере в браузере?

Question

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

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

Answer 1

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 нажмите Ctrl+Shift+M

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

Сафари:

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

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

Край:

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

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

Answer 2

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

Или с Firefox:

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

Приведенные выше ответы отлично подходят для тех, кто любит придерживаться одного браузера или имеет ограниченное "рабочее пространство" на рабочем столе (например, один монитор меньше 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 цента. :П