此页面由 Cloud Translation API 翻译。

在 Device Mode 下模拟移动设备

Kayce Basques

Sofia Emelianova

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

概览

设备模式是 Chrome 开发者工具中可帮助您来模拟移动设备相关功能包括：

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

限制

将设备模式视为您的网页在。使用 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）具有可折叠屏幕。此类屏幕具有连续或折叠状态。连续模式指的是“平坦”“position”和“folded”在显示屏的两个部分之间形成一个角度。

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

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

显示设备边框

在模拟特定移动设备（例如 Nest Hub）的尺寸时，选择更多选项 >Show device frame 以便在视口周围显示实体设备框架。

显示设备框架。

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

Nest Hub 的设备框架。

添加自定义移动设备

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

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

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