此页面由 Cloud Translation API 翻译。

在 Device Mode 下模拟移动设备

Kayce Basques

Sofia Emelianova

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

概览

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

模拟移动设备视口
限制 CPU 占用率
限制网络速度
要点：或者，您也可以在网络面板中限制连接速度。
此外，在传感器面板中：
- 模拟地理定位
- 设置屏幕方向

限制

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

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

打开设备工具栏

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

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

设备工具栏切换按钮

模拟移动设备视口

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

设备工具栏。

自适应视口模式

拖动手柄，将视口大小调整为所需的任意尺寸。或者在宽度和高度框中输入具体值在此示例中，宽度设置为 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 值，请执行以下操作：

依次点击更多选项 > 添加设备像素比。
在视口顶部的操作栏中，从新的 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 的设备框架。

添加自定义移动设备

要添加自定义设备，请执行以下操作：

点击设备列表，然后选择修改。
在设置设置 > 设备标签页上，从受支持的设备列表中选择一台设备，或点击添加自定义设备来添加您自己的设备。
如果您要添加自己的设备，请输入该设备的名称、宽度和高度，然后点击添加。

设备像素比、用户代理字符串和设备类型字段为选填字段。设备类型字段是默认设置为 Mobile 的列表。
返回视口，从尺寸列表中选择新添加的设备。