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

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

В Google Chrome перейдите на веб-сайт, который вы хотите просмотреть в эмуляторе мобильного браузера. Затем либо нажмите CTRL + SHIFT + I на клавиатуре, либо с помощью мыши щелкните три вертикальные точки в правом верхнем углу, чтобы открыть меню «Настройка и управление Google Chrome» . ^{(“Customize and control Google Chrome”)}Выберите « Дополнительные инструменты»,^{(More tools, )} а затем « Инструменты разработчика^{(Developer Tools)} » .

Доступ к инструментам разработчика^{(Access Developer Tools)} в Google Chrome

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

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

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

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

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

СОВЕТ.^(TIP:) Если вы активно пользуетесь Google Chrome^{(Google Chrome)} , вы также можете узнать , как использовать параметры управления мультимедиа в Google Chrome^{(how to use Google Chrome’s media control options)} .

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

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

Доступ к инструментам веб-разработчика^{(Web Developer)} в Firefox

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

Выберите режим адаптивного дизайна^{(Responsive Design Mode)} в Firefox .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Do you need to access a smartphone browѕer emulator on your PC tо test the mobile version оf a website you are interested in? Maybe you are а web developer, or you want to become one, and you need to simulate а mobile browѕer for the project you are working on. Regardless of your reаsons, here is how to access a mobile browser еmulator in Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• Как отключить вкладки в Chrome, Firefox, Microsoft Edge и Opera

• Как напечатать статью без рекламы во всех основных браузерах

• Как прикрепить сайт на панель задач или Start Menu в Windows 10

• Как сделать Chrome default browser в Windows 10 (Firefox & Opera)

• Как изменить default browser в Windows 11

• Как разблокировать Adobe Flash Player на Windows 10's Microsoft Edge

• Какой браузер продлит срок службы батареи в Windows 10?

• Как экспортировать пароли LastPass в файл CSV

• Как отключить уведомления Chrome: все, что вам нужно знать

• Как мне сделать текст больше в Chrome, Edge, Firefox, а Opera?

• Как изменить search engine на Chrome для Windows, MacOS, Android и IOS

• 7 способов, которыми браузеры должны улучшить приватный просмотр (Incognito, InPrivate и т. д.)

• Экспорт паролей из Chrome, Firefox, Opera, Microsoft Edge и Internet Explorer

• Где печенье хранится в Windows 10 для всех основных браузеров?

• Как пойти инкогнито в Chrome, Firefox, Edge, а Opera

• Как изменить язык в Firefox на Windows and Mac

• Топ 10 Microsoft Edge Add-ons в 2021 году

• Как включить не отслеживать в Chrome, Firefox, Edge, а Opera

• Как включить Java во всех основных веб-браузерах

• Как очистить куки на Android (Chrome, Firefox, Opera, Samsung Internet)