使用设备模式可大致估算网页在移动设备上的外观和效果。
概览
设备模式是 Chrome 开发者工具中可帮助您 来模拟移动设备相关功能包括：
限制
将设备模式视为您的网页在 。使用 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 值。
设置设备类型
使用设备类型列表模拟移动设备或桌面设备。
如果您在顶部的操作栏中看不到此列表，请选择更多选项 
>添加设备类型。
下表介绍了这些选项之间的差异。呈现方法指的是
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 的框架。
添加自定义移动设备
要添加自定义设备，请执行以下操作：
点击设备列表，然后选择修改。
在设置 settings 中 >设备标签页，您可以从受支持的设备列表中选择一台设备，或者点击添加自定义设备以添加您自己的设备。
如果您要添加自己的设备，请输入该设备的名称、宽度和高度，然后点击添加。
返回视口，从尺寸列表中选择新添加的设备。
显示标尺
点击更多选项 
>显示标尺可查看标尺。标尺的尺寸单位是像素。
DevTools 会在视口的顶部和左侧显示标尺。
点击特定标记的标尺可设置视口的宽度和高度。
缩放视口
使用缩放列表可以放大或缩小地图。
截取屏幕截图
若要截取您在视口中看到的内容的屏幕截图，请依次点击 
更多选项 >截取屏幕截图。
若要截取整个网页（包括视口中未显示的内容）的屏幕截图，请在该菜单中选择截取完整尺寸的屏幕截图。
如需在设备专用模式下截取屏幕截图时包含设备框架，请先显示设备框架，然后点击截取屏幕截图（如前所述）。
如需了解使用开发者工具截取屏幕截图的其他方式，请参阅使用开发者工具截取屏幕截图的 4 种方式。
限制网络流量和 CPU 占用率
要同时限制网络流量和 CPU 使用率，请选择中端移动设备或低端移动设备 Throttle 列表。
中端移动设备模拟快速 3G 网络，并限制 CPU 速度，使其比速度慢 4 倍 正常。低端移动设备会模拟慢速 3G 网络，并会将 CPU 限制速度降低到正常水平的 6 倍。保留 请记住，限制是相对于笔记本电脑或台式机的正常性能而言的。
请注意，如果设备工具栏较窄，节流列表将隐藏。
仅限制 CPU 占用率
如果只想限制 CPU 占用率，而不限制网络流量，请转到性能面板，然后点击捕获
设置 
和
然后从 CPU 列表中选择 4 倍变速、6 倍变速或 20 倍变速。
仅限制网络流量
如果只限制网络流量而不限制 CPU 占用率，请前往 Network 面板，然后选择 Fast 3G 或 Throttle 列表中的 Slow 3G。
或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P（Windows、Linux、ChromeOS）打开 Command
在菜单中，输入 3G，然后选择启用快速 3G 节流或启用慢速 3G 节流。
您还可以在性能面板中设置网络节流。点击捕获设置
，然后选择
网络列表中的 Fast 3G 或 Slow 3G。
模拟传感器
使用 Sensors 面板可以替换地理定位、模拟设备屏幕方向、强制轻触以及模拟空闲状态。
接下来的部分将简要介绍如何替换地理定位和设置设备的屏幕方向。如需查看完整的功能列表，请参阅模拟设备传感器。
替换地理定位
如需打开地理定位替换界面，请点击自定义和控制开发者工具
，然后选择更多工具 >传感器。
或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P（Windows、Linux、ChromeOS）打开 Command
在菜单中输入 Sensors，然后选择显示传感器。
从位置列表中选择一个预设，或者选择其他...以输入您的 自己的坐标，或者选择无法获取位置信息，以测试网页在加载时的行为 地理定位处于错误状态。
设置屏幕方向
如需打开屏幕方向界面，请点击 Customize and control DevTools，
，然后选择更多工具 >传感器。
或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P（Windows、Linux、ChromeOS）打开 Command
在菜单中输入 Sensors，然后选择显示传感器。
从方向列表中选择一个预设，或者选择自定义方向来设置 alpha 值、beta 值和 gamma 值。
