在 Device Mode 下模拟移动设备

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

使用设备模式可大致估算网页在移动设备上的外观和效果。

概览

设备模式是 Chrome 开发者工具中可帮助您模拟移动设备的一系列功能的名称。相关功能包括:

限制

您可以将设备模式视为网页在移动设备上的显示效果和样式的一阶近似值。使用 Device Mode 时,实际上并不是在移动设备上运行您的代码。您可以在笔记本电脑或桌面设备上模拟移动用户体验。

移动设备的某些方面是开发者工具无法模拟的。例如,移动设备 CPU 的架构与笔记本电脑或桌面设备 CPU 的架构截然不同。 如果不确定,最好的办法是在移动设备上运行您的网页。当网页代码实际在移动设备上运行时,您可以在笔记本电脑或桌面设备上使用远程调试查看、更改、调试和分析网页代码。

打开设备工具栏

如需打开设备工具栏,请按以下步骤操作:

  1. 打开开发者工具
  2. 点击顶部操作栏中的设备 切换设备工具栏

设备工具栏切换按钮

模拟移动设备视口

默认情况下,设备工具栏会在视口中打开,并且尺寸会设为自适应。 使用尺寸下拉菜单,您可以模拟特定移动设备的尺寸

设备工具栏。

自适应视口模式

拖动手柄,将视口大小调整为所需的任意尺寸。或者在宽度和高度框中输入具体值在此示例中,宽度设置为 480,高度设置为 415

在自适应视口模式下更改视口尺寸的手柄。

或者,使用宽度预设栏,点击一下便可将宽度设置为下列值之一:

宽度预设栏。

移动设备 S 中型移动设备 大屏幕移动设备 平板电脑 笔记本电脑 大屏笔记本电脑 4K
320 像素 375 像素 425 像素 768 像素 1024 像素 1440 像素 2560 像素

显示媒体查询

如需在视口上方显示媒体查询断点,请依次点击 更多选项。 更多选项 > 显示媒体查询

显示媒体查询。

现在,开发者工具会在视口上方显示另外两个条形:

  • 包含 max-width 断点的蓝色条。
  • 包含 min-width 断点的橙色条。

在断点之间点击可更改视口的宽度,以便触发断点。

在断点之间点击,可更改视口的宽度。

如需找到相应的 @media 声明,请右键点击断点之间的位置,然后选择 Reveal in source code。开发者工具会在 Editor 中的相应行中打开 Sources 面板。

在源代码下拉菜单中显示。

设置设备像素比

设备像素比 (DPR) 是硬件屏幕上的物理像素与逻辑 (CSS) 像素之间的比率。换言之,DPR 会告知 Chrome 使用多少屏幕像素来绘制 CSS 像素。在 HiDPI(每英寸高点数)显示屏上绘图时,Chrome 会使用 DPR 值。

要设置 DPR 值,请执行以下操作:

  1. 依次点击更多选项 更多选项。 > 添加设备像素比

    添加设备像素比。

  2. 在视口顶部的操作栏中,从新的 DPR 下拉菜单中选择一个 DPR 值。

    设置 DPR 值。

设置设备类型

使用设备类型列表模拟移动设备或桌面设备。

“Device Type”列表。

如果您在顶部的操作栏中看不到该列表,请依次选择更多选项 更多选项。 > 添加设备类型

下表介绍��这些选项之间的差异。呈现方式是指 Chrome 是将网页呈现为移动设备视口还是桌面设备视口。光标图标是指当您将鼠标悬停在页面上时看到的光标类型。触发的事件是指当您与网页互动时,网页会触发 touch 还是 click 事件。

选项呈现方式光标图标触发的事件数
移动设备移动设备圆形触控输入
移动设备(无接触)移动设备常规点击
桌面设备桌面设备常规点击
桌面设备(触摸)桌面设备圆形触控输入

设备专用模式

要模拟特定移动设备的尺寸,请从尺寸列表中选择相应设备。

“维度”列表。

如需了解详情,请参阅添加自定义移动设备

将视口旋转为横向

点击 screen_rotation 旋转,即可将视口旋转为横向。

横向。

请注意,如果设备工具栏较窄,旋转 旋转。 按钮会消失。

设备工具栏。

另请参阅设置方向

切换双屏幕模式

某些设备(例如 Surface Duo)有两个屏幕,有两种使用方式:一个或两个屏幕处于活动状态。

如需在双屏幕和单屏幕之间切换,请点击工具栏中的 devices_fold 图标 Toggle dual-screen mode

已开启双屏幕模式。

设置设备折叠状态

某些设备(例如华硕 Zenbook Fold)具有可折叠屏幕。此类屏幕具有连续或折叠状态。连续折叠状态指的是“平展”状态,折叠状态会在显示屏的各部分之间形成一个角度。

如需设置设备折叠状态,请从工具栏中的相应下拉菜单中选择连续模式折叠

折叠状态已设为“折叠”。

显示设备边框

在模拟特定移动设备(例如 Nest Hub)的尺寸时,请依次选择更多选项 更多选项。 > 显示设备框架,以在视口周围显示实体设备框架。

显示设备框架。

在此示例中,DevTools 会显示 Nest Hub 的框架。

Nest Hub 的设备框架。

添加自定义移动设备

要添加自定义设备,请执行以下操作:

  1. 点击设备列表,然后选择修改

    修改。

  2. 设置 设置 > 设备标签页上,从受支持的设备列表中选择一台设备,或点击添加自定义设备来添加您自己的设备。

  3. 如果您要添加自己的设备,请输入该设备的名称、宽度和高度,然后点击添加

    创建自定义设备。

    设备像素比用户代理字符串设备类型字段为选填字段。设备类型字段是默认设置为 Mobile 的列表。

  4. 返回视口,从尺寸列表中选择新添加的设备。

显示标尺

依次点击更多选项 更多选项。 > 显示标尺以查看标尺。标尺的尺寸单位是像素。

显示标尺。

DevTools 会在视口的顶部和左侧显示标尺。

视口上方和左侧的标尺。

点击特定标记的标尺可设置视口的宽度和高度。

缩放视口

使用缩放列表可以放大或缩小地图。

缩放。

截取屏幕截图

若要截取您在视口中看到的内容的屏幕截图,请依次点击 更多选项。 更多选项 > 截取屏幕截图

“更多选项”菜单中的“截取屏幕截图”选项。

若要截取整个网页(包括视口中未显示的内容)的屏幕截图,请在该菜单中选择截取完整尺寸的屏幕截图

限制网络流量和 CPU 占用率

如需同时限制网络和 CPU 流量,请从节流列表中选择中端移动设备低端移动设备

“节流”列表。

中端移动设备模拟快速 3G 网络,并限制 CPU 占用率,使其比正常速度慢 4 倍。低端移动设备会模拟慢速 3G 网络,并会将 CPU 限制速度降低到正常水平的 6 倍。请记住,限制是相对于笔记本电脑或桌面设备的正常性能而言的。

请注意,如果设备工具栏较窄,节流列表将处于隐藏状态。

仅限制 CPU 占用率

如需仅限制 CPU 占用率而不限制网络带宽,请转到 Performance 面板,点击 Capture Settings 图标 拍摄设���。,然后从 CPU 列表中选择 4x speeddown6x speeddown20 倍变速

CPU 列表。

仅限制网络流量

如果只想限制网络流量而不想限制 CPU 占用率,请转到 Network 面板,然后从 Throttle 列表中选择 Fast 3GSlow 3G

“节流”列表。

或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)打开命令菜单,输入 3G,然后选择启用快速 3G 节流启用慢速 3G 节流

命令菜单。

您还可以在性能面板中设置网络节流。点击 Capture Settings 图标 拍摄设置。,然后从 Network 列表中选择 Fast 3GSlow 3G

在“性能”面板中设置网络节流。

模拟传感器

使用 Sensors 面板可以替换地理定位、模拟设备屏幕方向、强制轻触以及模拟空闲状态。

接下来的部分将简要介绍如何替换地理定位和设置设备的屏幕方向。如需查看完整的功能列表,请参阅模拟设备传感器

替换地理定位

如需打开地理定位替换界面,请点击自定义和控制开发者工具 自定义和控制开发者工具。,然后依次选择更多工具 > 传感器

传感器

或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)打开命令菜单,输入 Sensors,然后选择显示传感器

显示“传感器”

位置列表中选择某个预设,或选择其他...以输入您自己的坐标,或选择无法获取位置信息,以测试在地理定位处于错误状态时您的网页行为。

地理定位

设置屏幕方向

如需打开屏幕方向界面,请点击 Customize and control DevTools 图标 自定义和控制开发者工具。,然后选择 More tools > 传感器

传感器

或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)打开命令菜单,输入 Sensors,然后选择显示传感器

显示“传感器”

方向列表中选择一个预设,或者选择自定义方向以设置您自己的 Alpha、Beta 和灰度系数值。

方向