Kayce Basques

Sofia Emelianova

使用设备模式来大致了解网页在移动设备上的外观和性能。

概览

“设备模式”是 Chrome 开发者工具中的一些功能的统称，可帮助您模拟移动设备。相关功能包括：

模拟移动设备视口

限制 CPU

限制网络

要点： 或者，您也可以在网络 面板中限制连接速度。

此外，在传感器 面板中：

模拟地理位置

设置屏幕方向

限制

您可以将设备模式视为对网页在移动设备上的外观

和体验的一阶近似。使用设备模式时，您实际上不会在移动设备上运行代码。您可以在笔记本电脑或桌面设备上模拟移动用户体验。

开发者工具永远无法模拟移动设备的某些方面。例如，移动 CPU 的架构与笔记本电脑或桌面 CPU 的架构截然不同。如有疑问，最好的办法是在移动设备上实际运行网页。使用 远程调试 功能，在网页实际在移动设备上运行时，从笔记本电脑或桌面设备上查看、

更改、调试和分析网页的代码。

打开设备工具栏

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

打开开发者工具。

点击顶部操作栏中的设备

切换设备工具栏。

模拟移动设备视口

默认情况下，设备工具栏会在视口中打开，且尺寸 设置为自适应 。 使用尺寸 下拉列表，您可以

模拟特定移动设备的尺寸。

自适应视口模式

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

或者，您也可以使用宽度预设栏，只需点击以下选项之一即可设置宽度：

小型移动设备

中型移动设备

大型移动设备

平板电脑

笔记本电脑

大型笔记本电脑

4K

320 像素

375 像素

425 像素

768 像素

1024 像素

1440 像素

2560 像素

显示媒体查询

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

开发者工具现在会在视口上方显示两个额外的栏：

带有 max-width 断点的蓝色栏。

带有 min-width 断点的 橙色 栏。

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

如需查找相应的 @media 声明，请在断点之间点击鼠标右键，然后选择 在源代码中显示 。开发者工具会在编辑器 中打开来源 面板，并显示相应的行。

设置设备像素比

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

如需设置 DPR 值，请执行以下操作：

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

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

设置设备类型

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

如果您在顶部的操作栏中看不到该列表，请依次选择更多选项

> 添加设备类型。

下表介绍了各个选项之间的区别。

渲染方法 是指 Chrome 将网页渲染为移动设备视口还是桌面设备视口。光标图标 是指当您将鼠标悬停在网页上时看到的光标类型。触发的事件 是指当您与网页互动时，网页是否会触发 touch 或 click 事件。

选项渲染方法光标图标触发的事件移动设备移动设备圆形触控输入移动设备（无触控）移动设备正常点击桌面设备桌面设备正常点击桌面设备（触控）桌面设备圆形触控输入

特定设备模式

如需模拟特定移动设备的尺寸，请从尺寸 列表中选择该设备。

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

将视口旋转为横向模式

点击 screen_rotation 旋转 ，将视口旋转为横向模式。

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

另请参阅设置屏幕方向。

切换双屏模式

某些设备（例如 Surface Duo）有两个屏幕，并且有两种使用方式：一个或两个屏幕处于活动状态。

如需在双屏和单屏之间切换，请点击工具栏中的 devices_fold 切换双屏模式 。

设置设备姿态

某些设备（例如 Asus Zenbook Fold）具有可折叠屏幕。此类屏幕具有姿态：连续或折叠。连续姿态是指“平放”位置，而折叠姿态是指显示屏各部分之间形成的角度。

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

显示设备边框

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

注意： 如果您没有看到特定设备的设备边框，则可能意味着开发者工具没有该特定选项的素材资源。

在此示例中，开发者工具显示了 Nest Hub 的边框。

添加自定义移动设备

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

点击设备 列表，然后选择修改 。

在设置 设置 > 设备标签页中，从受支持的设备列表中选择一个设备，或点击添加自定义设备以添加您自己的设备。

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

设备像素比、用户代理字符串和设备类型字段是可选字段。设备类型字段是默认设置为移动设备 的列表。

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

显示标尺

依次点击更多选项 > 显示标尺 ，即可看到标尺。标尺的尺寸单位为像素。

开发者工具会在视口的顶部和左侧显示标尺。

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

缩放视口

使用缩放 列表放大或缩小。

截取屏幕截图

如需截取视口中显示的内容的屏幕截图，请依次点击 更多选项 > 截取屏幕截图。

如需截取整个网页（包括视口中不可见的内容）的屏幕截图，请从同一菜单中选择截取完整尺寸的屏幕截图 。

如需在特定设备模式下截取屏幕截图时添加设备边框，请先显示设备边框，然后按照之前的说明点击截取屏幕截图。

如需了解使用开发者工具截取屏幕截图的其他方式，请参阅使用开发者工具截取屏幕截图的 4 种方式。

限制网络和 CPU

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

中端移动设备 模拟快速 3G，并将 CPU 限制为正常速度的 1/4。低端移动设备 模拟慢速 3G，并将 CPU 限制为正常速度的 1/6。请注意，限制是相对于笔记本电脑或桌面设备的正常功能而言的。

请注意，如果设备工具栏 较窄，限制 列表将会隐藏。

仅对 CPU 进行节流

如需仅限制 CPU 而不限制网络，请前往性能 面板，

点击 捕获设置 ，然后

从 CPU 列表中选择 4 倍减速 、6 倍减速 或 20 倍减速 。

仅限制网络

如需仅限制网络而不限制 CPU，请前往网络 面板，然后从限制 列表中选择快速 3G 或慢速 3G 。

或者，按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、ChromeOS）打开命令菜单，输入 3G，然后选择启用快速 3G 限制 或启用慢速 3G 限制 。

您还可以从性能 面板设置网络节流。点击捕获设置

，然后从网络列表中选择快速 3G或慢速 3G。

模拟传感器

使用传感器 面板可以替换地理位置、模拟设备屏幕方向、强制触控和模拟空闲状态。

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

替换地理位置

如需打开地理位置替换界面，请点击自定义和控制开发者工具

，然后依次选择更多工具 > 传感器。

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

从位置 列表中选择一个预设，或选择其他… 以输入您自己的坐标，或选择位置不可用 以测试网页在地理位置处于错误状态时的行为。

设置屏幕方向

如需打开屏幕方向界面，请点击自定义和控制开发者工具

，然后依次选择更多工具 > 传感器。

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

从屏幕方向 列表中选择一个预设，或选择自定义屏幕方向 以设置您自己的 alpha、beta 和 gamma 值。