Responsive Design Mode

响应式设计是设计网站的一种做法,以便使网站在各种不同的设备(尤其是手机和平板电脑以及台式机和笔记本电脑)上都能正常工作.

这里最明显的因素是屏幕尺寸,但也有其他因素,包括显示器的像素密度以及它是否支持触摸. 响应式设计模式为您提供了一种简单的方法来模拟这些因素,以测试您的网站在不同设备上的外观和行为.

Toggling Responsive Design Mode

可以通过三种方式切换响应式设计模式:

  • 在Firefox菜单中:从Firefox菜单(或工具菜单,如果显示菜单栏或在macOS上)的Web Developer子菜单中选择"响应式设计模式".
  • 在"开发人员工具"工具箱中:按下工具箱工具栏中的"响应式设计模式"按钮:
  • 在键盘上:按Ctrl + Shift + M (或 macOS 上为 Cmd + Opt + M).

Using Responsive Design Mode

启用响应式设计模式后,网页的内容区域将设置为特定设备的屏幕尺寸. 最初,它设置为320 x 480像素.

注意:处于响应式设计模式时选择的设备和方向(纵向或横向)将在两次会话之间保存.

所选设备的信息位于显示屏中央. 从左到右,显示内容包括:

  • 所选设备的名称 -一个下拉列表,其中包括从"设备设置"屏幕中选择的任何设备.
  • 屏幕尺寸 -可以编辑宽度和高度值通过直接编辑数字或使用向上向下键增加或由1个像素上的每个按键或保持减小值和Shift改变装置尺寸由10来改变值.
    • 鼠标滚轮一次将大小值更改1个像素
    • 您也可以通过抓住视口的右下角并将其拖动到所需的大小来更改设备的屏幕大小.
  • 方向(人像或风景) -此设置在会话之间保持不变
    • 屏幕截图将保存到Firefox的默认下载位置.

    • 如果您在"开发人员工具设置"页面中选中了"截图到剪贴板",则截图将被复制到系统剪贴板.

  • DPR(像素比率) -从Firefox 68开始,DPR不再可编辑; 创建自定义设备以更改DPR
  • 节流 -一个下拉列表,您可以在其中选择要应用的连接节流,例如2G,3G或LTE
  • 触摸支持 -切换"响应式设计模式"是否包括触摸支持. 启用触摸事件模拟后,鼠标事件将转换为触摸事件 .

在屏幕的右端,三个按钮使您可以:

  • 相机按钮 -截图
  • 设置按钮 -打开RDM设置菜单
  • 关闭按钮 -关闭RDM模式并返回到常规浏览

设置菜单包括以下命令:

  • 左对齐视口 -选中后,将RDM视口移到浏览器窗口的左侧
  • 显示用户代理 -选中后显示用户代理字符串
  • 最后两个选项定义何时重新加载页面:
    • 切换触摸模拟时重新加载 -启用此选项后,只要切换触摸支持,页面就会重新加载
    • 更改用户代理时重新加载-启用此选项后,只要更改用户代理,页面就会重新加载

Developer Toolbox with RDM

您可以独立于切换"响应式设计模式"本身来显示或隐藏"开发人员工具"工具箱:

启用响应设计模式后,您可以像平常一样在调整大小的内容区域中继续浏览.

Device selection

在视口上方,您会看到一个标签"未选择设备"; 单击此按钮以查看设备名称列表. 选择一个设备,然后"响应式设计模式"设置以下属性以匹配所选设备:

  • 屏幕尺寸
  • 设备像素比率(设备物理像素与设备无关像素的比率)
  • 触摸事件模拟

此外,Firefox将设置User-Agent HTTP请求标头,以将其自身标识为所选设备上的默认浏览器. 例如,如果您选择了iPhone,则Firefox会将自己标识为Safari. navigator.userAgent属性将设置为相同的值.

下拉列表中列出的设备只是可以选择的设备的子集. 在下拉列表的最后,您将看到一个标签为"编辑列表..."的项目. 选择此选项可查看包含所有选项的面板,使您可以在下拉菜单中查看要查看的设备. 设备集以及与每个设备关联的值取自https://github.com/mozilla/simulated-devices.

Creating custom devices

您可以通过单击" 添加自定义设备"按钮在响应设计模式下创建和保存自定义设备 . 每个设备可以有自己的:

  • Name
  • Size
  • DevicePixelRatio
  • 用户代理字符串
  • 触控支持

另外,您可以通过将现有设备的属性悬停在将显示在工具提示中的设备模式中的名称上,来预览它们的属性.

  • 切换触摸模拟时重新加载:选中此复选框会在启用触摸事件模拟时自动重新加载页面.
  • 更改用户代理时重新加载:选中此复选框会在用户代理更改时自动重新加载页面.

在Firefox 60之前,此类重新加载会自动发生,因为否则将无法应用某些页面行为. 例如,许多页面会在加载时检查是否支持触摸,并且仅在支持时添加事件处理程序,或者仅在某些浏览器上启用某些功能.

但是,如果您对检查这些功能不感兴趣(也许您只是在检查不同尺寸的整体布局),则这些重新加载会浪费时间,并可能导致生产工作损失,因此能够控制这些功能非常有用.重新加载.

现在,当您首次更改此类设置时,系统会显示一条警告消息,告诉您这些重新加载不再自动进行,并告知您如何使它们自动进行. 例如:

Network throttling

如果使用非常快速的网络连接进行所有开发和测试,则在使用较慢的连接访问站点时,可能会发现站点出现问题. 在响应式设计模式下,您可以指示浏览器非常近似地模拟各种不同类型网络的特征.

模拟的特征是:

  • 下载速度
  • 上传速度
  • 最小延迟

下表列出了与每种网络类型相关的编号,但是请不要依赖此功能进行准确的性能评估; 旨在大致了解不同条件下的用户体验.

Selection 下载速度 上传速度 最小等待时间(毫秒)
GPRS 50 KB /秒 20 KB /秒 500
普通2G 250 KB /秒 50 KB /秒 300
好2G 450 KB /秒 150 KB /秒 150
普通3G 750 KB /秒 250 KB /秒 100
好3G 1.5 MB /秒 750 KB /秒 40
常规4G / LTE 4 MB /秒 3 MB /秒 20
DSL 2 MB /秒 1 MB /秒 5
Wi-Fi 30 MB /秒 15 MB /秒 2

要选择一个网络,请单击最初标记为"无限制"的列表框: