如何在 Chrome、Firefox、Edge 和 Opera 中使用移动浏览器模拟器 -

您是否需要在 PC 上访问智能手机浏览器模拟器来测试您感兴趣的网站的移动版本?也许您是一名 Web 开发人员,或者您想成为一名 Web 开发人员,并且您需要为您正在从事的项目模拟移动浏览器。无论您出于何种原因,以下是在(Regardless)Google ChromeMozilla FirefoxMicrosoft Edge和 Opera中访问移动浏览器模拟器的方法:

如何在谷歌(Google Chrome)浏览器中打开和使用移动浏览器模拟器

Google Chrome中,导航到您要在移动浏览器模拟器中查看的网站。然后,按键盘上的CTRL + SHIFT + I键,或者用鼠标单击右上角的三个垂直点以打开“自定义和控制 Google Chrome”(“Customize and control Google Chrome”)菜单。选择更多工具,(More tools, )然后选择开发者工具(Developer Tools)

在 Google Chrome 中访问开发者工具

(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

关闭移动浏览器模拟器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 中的 Web 开发人员工具

访问Firefox中的(Firefox)Web 开发人员(Web Developer)工具

您会看到一个菜单,其中包含对 Web 开发人员有用的工具。在列表中,选择“响应式设计模式”(“Responsive Design Mode,”),这种查看网页的特定模式会在Firefox中加载。

在 Firefox 中选择响应式设计模式

Firefox中选择响应式设计模式(Responsive Design Mode)

Firefox 启用响应式设计模式(Responsive Design Mode)。在窗口顶部,您可以看到此仿真模式使用的参数。如果未选择任何设备,请单击或点击响应(Responsive)以打开包含可用于仿真的设备的下拉列表,然后选择要模拟的设备。

您可以模拟许多 iPhone、iPad、Kindle FireFirefox是唯一提供此模拟选项的浏览器)和三星 Galaxy S9(Samsung Galaxy S9)设备的移动浏览器。

在 Firefox 中使用移动浏览器模拟器

在Firefox(Firefox)中使用移动浏览器模拟器

使用智能手机浏览器模拟器完成测试后,按Mozilla Firefox右上角的X(关闭响应式设计模式)(X (Close Responsive Design Mode))按钮。

在 Firefox 中关闭移动浏览器模拟器

在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中的(Microsoft Edge)开发人员(Developer)工具

单击“切换设备仿真”(“Toggle device emulation”)按钮(它看起来像平板电脑旁边的智能手机)或按键盘上的CTRL + Shift + M这将激活移动浏览器模拟器工具栏。默认情况下,它为您加载的站点使用响应(Responsive)式模板。单击(Click)它并选择要模拟的移动设备。您的选项包括与Google Chrome(Google Chrome)相同的智能手机和平板电脑。

在 Microsoft Edge 中访问移动浏览器模拟器

在Microsoft Edge(Microsoft Edge)中访问移动浏览器模拟器

浏览您要测试的站点,在不同的移动设备之间进行更改,然后查看它的外观。完成后,按Microsoft Edge 右上角的X(关闭)按钮。(X (Close))

关闭 Microsoft Edge 中的移动浏览器模拟器

关闭Microsoft Edge中的移动浏览器模拟器(Microsoft Edge)

您现在回到标准桌面浏览模式。

如何在Opera(Opera)中打开和使用移动浏览器模拟器

Opera中,像使用移动设备一样访问您要查看的网页。然后单击左上角的Opera图标( (Opera)“自定义和控制 Opera”(“Customize and control Opera”))。在打开的菜单中,选择Developer ,然后选择Developer tools。如果您更喜欢键盘,请按CTRL+Shift+I键以获得相同的结果。

访问 Opera 中的开发人员工具

访问 Opera 中的开发人员工具

开发者工具( Developer tools)显示在浏览器窗口的右侧。单击“切换设备工具栏”(“Toggle device toolbar”)按钮(它看起来像平板电脑旁边的智能手机)或按键盘上的CTRL + Shift + M设备工具栏显示在左侧。默认情况下,它为您加载的站点使用响应(Responsive)式模板。单击(Click)它并从选项列表中选择要模拟的移动设备。Opera 提供与Google Chrome(Google Chrome)Microsoft Edge相同的移动浏览器模拟器,因为它基于相同的渲染引擎 ( Chromium )。

在 Opera 中访问移动浏览器模拟器

在Opera(Opera)中访问移动浏览器模拟器

完成测试后,按右上角的 X(关闭)按钮返回标准桌面浏览模式。(Close)

在 Opera 中关闭移动浏览器模拟器

在Opera(Opera)中关闭移动浏览器模拟器

(Are)对可用的移动浏览器仿真选项感到满意吗?

现在您知道如何在您最喜欢的网络浏览器中模拟各种移动设备。但是,您可能会注意到大多数 Web 浏览器都提供了与 iPhone 和 iPad 相同的仿真选项。如果您想模拟现代Android智能手机或平板电脑,您的机会非常渺茫,即使在Google Chrome (由(Google Chrome)Android背后的公司开发的浏览器)中也是如此。如果您想要获得最佳结果,您可能需要为此任务使用两种浏览器:ChromeFirefox,或者FirefoxEdgeOpera。在您出发之前,请告诉我们您对可用选项的看法。



About the author

我是一名软件工程师,在 Xbox 行业拥有超过 10 年的经验。我专注于游戏开发和安全测试。我也是一位经验丰富的评论员,并且一直在为一些游戏界的知名人士开发项目,包括 Ubisoft、Microsoft 和 Sony。在空闲时间,我喜欢玩电子游戏和看电视节目。



Related posts