您是否需要在 PC 上访问智能手机浏览器模拟器来测试您感兴趣的网站的移动版本?也许您是一名 Web 开发人员,或者您想成为一名 Web 开发人员,并且您需要为您正在从事的项目模拟移动浏览器。无论您出于何种原因,以下是在(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中(Google Chrome)访问开发者工具
单击或点击“切换设备工具栏”(“Toggle device toolbar”)按钮(它看起来像平板电脑旁边的智能手机)或按键盘上的CTRL + Shift + M这将激活加载移动页面的设备工具栏。默认情况下,设备工具栏为您加载的站点使用响应(Responsive)式模板。单击(Click)它并选择要模拟的移动设备。您的选择包括许多 iPhone、iPad、Surface Duo、两台三星 Galaxy(Samsung Galaxy)设备和一个用于 PC的Moto G4 移动浏览器模拟器。(Moto G4 mobile)
如何在谷歌浏览器中启用移动浏览器模拟器(Google Chrome)
提示:(TIP:)不幸的是,您只能在启用开发人员工具后使用CTRL + Shift + M
浏览(Navigate)您要测试的站点,在不同的智能手机和平板电脑之间切换,看看它的外观。完成后,按Google Chrome 开发者工具右上角的X(关闭)按钮返回标准桌面浏览模式。(X (Close))
关闭移动浏览器模拟器Google Chrome
提示:(TIP:)如果您是Google Chrome的重度用户,您可能还想了解如何使用 Google Chrome 的媒体控制选项(how to use Google Chrome’s media control options)。
如何在Mozilla Firefox(Mozilla Firefox)中打开和使用移动浏览器模拟器
在Mozilla Firefox中,打开您要为其使用移动浏览器模拟器的站点。然后,按键盘上的CTRL + Shift + M或单击右上角的汉堡按钮以打开 Firefox 的菜单,然后选择Web Developer。
访问Firefox中的(Firefox)Web 开发人员(Web Developer)工具
您会看到一个菜单,其中包含对 Web 开发人员有用的工具。在列表中,选择“响应式设计模式”(“Responsive Design Mode,”),这种查看网页的特定模式会在Firefox中加载。
在Firefox中选择响应式设计模式(Responsive Design Mode)
Firefox 启用响应式设计模式(Responsive Design Mode)。在窗口顶部,您可以看到此仿真模式使用的参数。如果未选择任何设备,请单击或点击响应(Responsive)以打开包含可用于仿真的设备的下拉列表,然后选择要模拟的设备。
您可以模拟许多 iPhone、iPad、Kindle Fire(Firefox是唯一提供此模拟选项的浏览器)和三星 Galaxy S9(Samsung Galaxy S9)设备的移动浏览器。
在Firefox(Firefox)中使用移动浏览器模拟器
使用智能手机浏览器模拟器完成测试后,按Mozilla Firefox右上角的X(关闭响应式设计模式)(X (Close Responsive Design Mode))按钮。
在Firefox(Firefox)中关闭移动浏览器模拟器
您将返回标准桌面浏览模式。
如何在Microsoft Edge(Microsoft Edge)中打开和使用移动浏览器模拟器
Microsoft Edge使用与(Microsoft Edge)Google Chrome相同的渲染引擎,并提供相同的智能手机浏览器模拟器。要访问它们,请访问您要测试的网站,然后按键盘上的CTRL + SHIFT + I键或单击Microsoft Edge右上角的三个水平点( “设置和更多”(“Settings and more”) ) 。在出现的菜单中,转到更多工具(More tools),然后转到开发人员工具(Developer Tools)。
访问Microsoft Edge中的(Microsoft Edge)开发人员(Developer)工具
单击“切换设备仿真”(“Toggle device emulation”)按钮(它看起来像平板电脑旁边的智能手机)或按键盘上的CTRL + Shift + M这将激活移动浏览器模拟器工具栏。默认情况下,它为您加载的站点使用响应(Responsive)式模板。单击(Click)它并选择要模拟的移动设备。您的选项包括与Google Chrome(Google Chrome)相同的智能手机和平板电脑。
在Microsoft Edge(Microsoft Edge)中访问移动浏览器模拟器
浏览您要测试的站点,在不同的移动设备之间进行更改,然后查看它的外观。完成后,按Microsoft Edge 右上角的X(关闭)按钮。(X (Close))
关闭Microsoft Edge中的移动浏览器模拟器(Microsoft Edge)
您现在回到标准桌面浏览模式。
如何在Opera(Opera)中打开和使用移动浏览器模拟器
在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(Google Chrome)和Microsoft Edge相同的移动浏览器模拟器,因为它基于相同的渲染引擎 ( Chromium )。
在Opera(Opera)中访问移动浏览器模拟器
完成测试后,按右上角的 X(关闭)按钮返回标准桌面浏览模式。(Close)
在Opera(Opera)中关闭移动浏览器模拟器
您(Are)对可用的移动浏览器仿真选项感到满意吗?
现在您知道如何在您最喜欢的网络浏览器中模拟各种移动设备。但是,您可能会注意到大多数 Web 浏览器都提供了与 iPhone 和 iPad 相同的仿真选项。如果您想模拟现代Android智能手机或平板电脑,您的机会非常渺茫,即使在Google Chrome (由(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 browsеr emulator on your PC to test the mobile version of a website уou are interested in? Maybe you are a web developеr, оr you want to beсome one, and you need to simulate a mobile brоwѕer for the рroject you are working on. Regardless of your reasons, hеre iѕ hоw to access a mobile browser emulator in Google Chrome, Mоzilla 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.