Поскольку мы сейчас находимся в мире, ориентированном на мобильные устройства, становится все более и более важным иметь возможность легко тестировать веб-сайты на мобильных телефонах или на эмулируемых мобильных телефонах. Я сотрудничаю с людьми, которые работают над веб-сайтами и предложениями социальных сетей, и я хотел бы призвать их регулярно открывать веб-сайты из своих браузеров настольных компьютеров в мобильном виде. Я конкретно имею в виду встроенную в браузер функцию «мобильного вида», которая часто скрыта среди всех других инструментов разработчика, предоставляемых браузером, но я с радостью рассмотрю что-либо, что можно так же быстро настроить.
Как открыть мобильную версию веб-сайта из браузера настольного компьютера?
решение1
Fire Fox:
- В Windows/Linux нажмите Ctrl+ Shift+M
- В macOS нажмите option+ command+M
Этот пункт меню также можно найти в разделах («Инструменты»), «Веб-разработчик», «Режим адаптивного дизайна».
Chrome и Edge:
Сначала вам необходимо открыть «Инструменты разработчика»:
- В Windows/Linux нажмите Ctrl+ Shift+ Iили простоF12
- В macOS нажмите option+ command+I
После того, как инструменты разработчика открыты и сфокусированы, вы можете включить эмуляцию устройства:
- В Windows/Linux нажмите Ctrl+ Shift+M
- В macOS нажмите command+ shift+M
На панели инструментов разработчика есть небольшая кнопка, которая включает эмуляцию устройства, если вы предпочитаете нажимать кнопку, а не сочетание клавиш.
Сафари:
Похоже, Apple по умолчанию отключила сочетание клавиш для входа в режим адаптивного дизайна. Вы можете следитьэто руководство по настройке сочетания клавиш для него.
Вы можете найти пункт меню, нажав «Разработка», «Вход в режим адаптивного дизайна». Если вы не видите пункт меню «Разработка», вам нужно включить его, открыв «Настройки», «Дополнительно» и отметив «Показывать меню «Разработка» в строке меню».
решение2
Ответ Флимма100% верно. На всякий случай, если вам будет сложно запомнить сочетания клавиш, вот эта синяя кнопка в инструментах разработчика для переключения между веб-видом и видом на мобильном устройстве/планшете:
Или с помощью Firefox:
После включения панели инструментов устройства вы можете выбрать из раскрывающегося меню марку и модель устройства, которое вы хотите эмулировать.
решение3
Для целей тестирования я использую следующие веб-сайты:
Оба вышеуказанных сайта позволяют мне просматривать мое веб-приложение на устройствах разной ширины.
решение4
Добавьте расширение "user agent switcher" в свой браузер и укажите мобильный user agent. Если веб-сайтумныйдостаточно, чтобы он послужил вам оптимизированной для мобильных устройств версией.
Я не буду рекомендовать какое-то конкретное расширение. Идеальное расширение должно иметь встроенные пресеты для мобильных браузеров и возможность включать или отключать переключение пользовательских агентов для каждого сайта.