Как использовать эмулятор мобильного браузера в Chrome, Firefox, Edge и Opera

Вам нужен доступ к эмулятору браузера смартфона на вашем ПК, чтобы протестировать мобильную версию интересующего вас веб-сайта? Может быть, вы веб-разработчик или хотите им стать, и вам нужно смоделировать мобильный браузер для проекта, над которым вы работаете. Независимо от ваших причин, вот как получить доступ к эмулятору мобильного браузера в Google Chrome, Mozilla Firefox, Microsoft Edge и Opera:

Содержание

1. Как включить и использовать эмулятор мобильного браузера в Google Chrome
2. Как включить и использовать эмулятор мобильного браузера в Mozilla Firefox
3. Как включить и использовать эмулятор мобильного браузера в Microsoft Edge
4. Как включить и использовать эмулятор мобильного браузера в Opera
5. Довольны ли вы доступными вариантами эмуляции мобильного браузера?

Как включить и использовать эмулятор мобильного браузера в Google Chrome

В Google Chrome перейдите на веб-сайт, который вы хотите просмотреть в эмуляторе мобильного браузера. Затем либо нажмите клавиши CTRL + SHIFT + I на клавиатуре, либо с помощью мыши щелкните три вертикальные точки в правом верхнем углу, чтобы открыть меню «Настройка и управление Google Chrome» . Выберите « Дополнительные инструменты», а затем « Инструменты разработчика » .

Доступ к инструментам разработчика в Google Chrome

Нажмите или коснитесь кнопки «Переключить панель инструментов устройства» (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов устройства, на которой загружается мобильная страница. По умолчанию панель инструментов устройства использует адаптивный шаблон для загруженного вами сайта. Нажмите на нее и выберите мобильное устройство, которое вы хотите эмулировать. Ваши варианты включают множество iPhone, iPad, Surface Duo, два устройства Samsung Galaxy и симулятор мобильного браузера Moto G4 для ПК.

Как включить эмулятор мобильного браузера в Google Chrome

СОВЕТ: К сожалению, вы можете использовать сочетание клавиш CTRL + Shift + M только после включения инструментов разработчика.

Перейдите по сайту, который хотите протестировать, переключитесь между разными смартфонами и планшетами и посмотрите, как он выглядит. Когда вы закончите, нажмите кнопку X (Закрыть) в правом верхнем углу инструментов разработчика Google Chrome, чтобы вернуться в стандартный режим просмотра на рабочем столе.

Закрытие эмулятора мобильного браузера Google Chrome

СОВЕТ. Если вы активно пользуетесь Google Chrome, вы также можете узнать , как использовать параметры управления мультимедиа в Google Chrome .

Как включить и использовать эмулятор мобильного браузера в Mozilla Firefox

В Mozilla Firefox откройте сайт, для которого вы хотите использовать симулятор мобильного браузера. Затем либо нажмите CTRL + Shift + M на клавиатуре, либо нажмите кнопку гамбургера в правом верхнем углу, чтобы открыть меню Firefox, и выберите « Веб-разработчик » .

Доступ к инструментам веб-разработчика в Firefox

Вы видите меню, наполненное инструментами, полезными для веб-разработчиков. В списке выберите «Режим адаптивного дизайна», и именно этот режим просмотра веб-страницы загружается в Firefox.

Выберите режим адаптивного дизайна в Firefox.

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

Вы можете имитировать мобильный браузер для многих iPhone, iPad, Kindle Fire (Firefox — единственный браузер, предлагающий эту опцию эмуляции) и устройств Samsung Galaxy S9.

Используйте эмулятор мобильного браузера в Firefox

Когда вы закончите тестирование с помощью эмулятора браузера смартфона, нажмите кнопку X (закрыть режим адаптивного дизайна) в правом верхнем углу Mozilla Firefox.

Закройте эмулятор мобильного браузера в Firefox.

Вы вернулись к стандартному режиму просмотра рабочего стола.

Как включить и использовать эмулятор мобильного браузера в Microsoft Edge

Microsoft Edge использует тот же механизм рендеринга, что и Google Chrome, и предлагает те же эмуляторы браузера для смартфонов. Чтобы получить к ним доступ, посетите веб-сайт, который вы хотите протестировать, и либо нажмите клавиши CTRL + SHIFT + I на клавиатуре, либо щелкните три горизонтальные точки ( «Настройки и другое» ) в правом верхнем углу Microsoft Edge. В появившемся меню перейдите в « Дополнительные инструменты », а затем в « Инструменты разработчика» .

Доступ к инструментам разработчика в Microsoft Edge

Нажмите кнопку «Включить эмуляцию устройства» (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов эмулятора мобильного браузера. По умолчанию он использует адаптивный шаблон для загруженного вами сайта. Нажмите на нее и выберите мобильное устройство, которое вы хотите эмулировать. Ваши варианты включают те же смартфоны и планшеты, что и Google Chrome.

Доступ к эмулятору мобильного браузера в Microsoft Edge

Просмотрите сайт, который хотите протестировать, переключитесь между различными мобильными устройствами и посмотрите, как он выглядит. Когда вы закончите, нажмите кнопку X (Закрыть) в правом верхнем углу Microsoft Edge.

Закройте эмулятор мобильного браузера в Microsoft Edge.

Теперь вы вернулись к стандартному режиму просмотра рабочего стола.

Как включить и использовать эмулятор мобильного браузера в Opera

В Opera посетите веб-страницу, которую вы хотите просмотреть, как если бы вы использовали мобильное устройство. Затем щелкните значок Opera в левом верхнем углу ( «Настройка и управление Opera» ). В открывшемся меню выберите « Разработчик », а затем « Инструменты разработчика » . Если вы предпочитаете клавиатуру, нажмите клавиши CTRL+Shift+I для того же результата.

Доступ к инструментам разработчика в Opera

Инструменты разработчика отображаются в правой части окна браузера. Нажмите кнопку «Переключить панель инструментов устройства» (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Панель инструментов устройства показана слева. По умолчанию он использует адаптивный шаблон для загруженного вами сайта. Нажмите на нее и выберите мобильное устройство, которое вы хотите эмулировать, из списка вариантов. Opera предлагает те же эмуляторы мобильных браузеров, что и Google Chrome и Microsoft Edge, поскольку основана на том же механизме рендеринга (Chromium).

Доступ к эмулятору мобильного браузера в Opera

Когда вы закончите тестирование, нажмите кнопку X (Закрыть) в правом верхнем углу, чтобы вернуться в стандартный режим просмотра рабочего стола.

Закройте эмулятор мобильного браузера в Opera

Довольны ли вы доступными вариантами эмуляции мобильного браузера?

Теперь вы знаете, как эмулировать все виды мобильных устройств в своем любимом веб-браузере. Однако вы можете заметить, что большинство веб-браузеров предлагают те же параметры эмуляции, что и iPhone и iPad. Если вы хотите подражать современному Android-смартфону или планшету, ваши шансы довольно малы, даже в Google Chrome — браузере, разработанном компанией, стоящей за Android. Если вам нужны наилучшие результаты, вам может потребоваться использовать для этой задачи два браузера: Chrome и Firefox, Firefox и Edge или Opera. Прежде чем уйти, расскажите нам, что вы думаете о доступных вариантах.