使用设备模式来大致了解网页在移动设备上的外观和性能。
概览
“设备模式”是 Chrome 开发者工具中的一些功能的统称，可帮助您模拟移动设备。相关功能包括：
限制
您可以将设备模式视为对网页在移动设备上的外观 和体验的一阶近似。使用设备模式时，您实际上不会在移动设备上运行代码。您可以在笔记本电脑或桌面设备上模拟移动用户体验。
开发者工具永远无法模拟移动设备的某些方面。例如，移动 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 事件。
| 选项 | 渲染方法 | 光标图标 | 触发的事件 |
|---|---|---|---|
| 移动设备 | 移动设备 | 圆形 | 触控输入 |
| 移动设备（无触控） | 移动设备 | 正常 | 点击 |
| 桌面设备 | 桌面设备 | 正常 | 点击 |
| 桌面设备（触控） | 桌面设备 | 圆形 | 触控输入 |
特定设备模式
如需模拟特定移动设备的尺寸，请从尺寸 列表中选择该设备。
如需了解详情，请参阅添加自定义移动设备。
将视口旋转为横向模式
点击 旋转 ，将视口旋转为横向模式。
请注意，如果设备工具栏 较窄，旋转 按钮会消失。
按钮会消失。
另请参阅设置屏幕方向。
切换双屏模式
某些设备（例如 Surface Duo）有两个屏幕，并且有两种使用方式：一个或两个屏幕处于活动状态。
如需在双屏和单屏之间切换，请点击工具栏中的 切换双屏模式 。
设置设备姿态
某些设备（例如 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。
，然后从网络列表中选择快速 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 值。
