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

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

快速步骤:

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

  1. 在Google Chrome浏览器中,导航到要在移动浏览器模拟器中查看的网站。
  2. 按键盘上的CTRL + SHIFT + I键以访问开发人员工具。
  3. 按键盘上的CTRL + Shift + M打开设备工具栏,
  4. 单击设备工具栏上的,然后选择要模拟的移动设备。

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

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

在Google Chrome中访问开发人员工具

在Google Chrome中访问开发人员工具

在Google Chrome中访问开发人员工具

单击或点击“切换设备工具栏”按钮(类似于平板电脑旁边的智能手机),或按键盘上的CTRL + Shift +M。这将激活加载移动页面的设备工具栏。默认情况下,设备工具栏为您加载的网站使用自适应模板。单击它,然后选择要模拟的移动设备。您的选择包括许多iPhone,iPad,Surface Duo,两个Samsung Galaxy设备以及一个用于PC的Moto G4移动浏览器模拟器。

如何在谷歌浏览器中启用移动浏览器模拟器

如何在谷歌浏览器中启用移动浏览器模拟器

如何在谷歌浏览器中启用移动浏览器模拟器

提示:不幸的是,只有在启用开发人员工具后,才能使用CTRL + Shift + M键盘快捷键。

导航您要测试的站点,在不同的智能手机和平板电脑之间切换,并查看其外观。完成后,请按Google Chrome开发人员工具右上角的X(关闭)按钮,以返回标准桌面浏览模式。

关闭移动浏览器模拟器Google Chrome

关闭移动浏览器模拟器Google Chrome

关闭移动浏览器模拟器Google Chrome

提示:如果您是沉重的Google Chrome用户,则可能还需要学习如何使用Google Chrome的媒体控制选项。

如何在Mozilla Firefox中打开和使用移动浏览器模拟器

在Mozilla Firefox中,打开要使用其移动浏览器模拟器的站点。然后,按键盘上的CTRL + Shift + M或单击右上角的burger按钮以打开Firefox的菜单,然后选择Web Developer

访问Firefox中的Web Developer工具

访问Firefox中的Web Developer工具

访问Firefox中的Web Developer工具

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

在Firefox中选择自适应设计模式

在Firefox中选择自适应设计模式

在Firefox中选择自适应设计模式

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

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

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

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

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

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

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

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

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

您又回到了标准的桌面浏览模式。

如何在Microsoft Edge中打开和使用移动浏览器模拟器

Microsoft Edge使用与Google Chrome相同的渲染引擎,并提供相同的智能手机浏览器模拟器。要访问它们,请访问要测试的网站,然后按键盘上的CTRL + SHIFT + I键或单击Microsoft Edge右上角的三个水平点(“设置和更多”)。在出现的菜单中,转到“更多工具”,然后转到“开发人员工具”

访问Microsoft Edge中的开发人员工具

访问Microsoft Edge中的开发人员工具

访问Microsoft Edge中的开发人员工具

单击“切换设备仿真”按钮(类似于平板电脑旁边的智能手机),或按键盘上的CTRL + Shift +M。这将激活移动浏览器模拟器工具栏。默认情况下,它对您加载的网站使用响应式模板。单击它,然后选择要模拟的移动设备。您的选择包括与Google Chrome相同的智能手机和平板电脑。

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

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

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

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

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

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

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

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

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

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

访问Opera中的开发者工具

访问Opera中的开发者工具

访问Opera中的开发者工具

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

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

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

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

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

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
软件百科

如何在Windows 10中查看,安装和删除字体?

2021-4-16 13:52:39

软件百科

如何设置Windows 10开始菜单以显示整个屏幕

2021-4-16 16:22:08

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索