在 Device Mode 下模拟移动设备

Sofia Emelianova
Sofia Emelianova

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

概览

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

限制

将设备模式视为您的网页在 。使用 Device Mode 时,实际上并不是在移动设备上运行您的代码。您可以模拟 通过笔记本电脑或桌面设备改善移动用户体验。

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

打开设备工具栏

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

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

设备工具栏切换按钮

模拟移动设备视口

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

设备工具栏。

自适应视口模式

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

  1. 点击更多选项 更多选项。 >添加设备像素比

    添加设备像素比。

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

    设置 DPR 值。

设置设备类型

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

“Device Type”列表。

如果您在顶部的操作栏中看不到此列表,请选择更多选项 更多选项。 >添加设备类型

下表介绍了这些选项之间的差异。呈现方法指的是 Chrome 会将网页呈现为移动设备视口还是桌面设备视口。光标图标指的是 光标悬停区域触发的事件是指网页是否触发 touchclick 事件。

选项呈现方式光标图标触发的事件数
移动设备移动设备圆形触控输入
移动设备(无接触)移动设备正常点击
桌面设备桌面设备正常点击
桌面设备(触摸)桌面设备圆形触控输入

设备专用模式

要模拟特定移动设备的尺寸,请从尺寸列表中选择相应设备。

“维度”列表。

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

将视口旋转为横向

点击 screen_rotation 旋转,即可将视口旋转为横向。

横向。

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

设备工具栏。

另请参阅设置方向

切换双屏幕模式

某些设备(例如 Surface Duo)有两个屏幕,有两种使用方式:一个或两个屏幕处于活动状态。

如需在双屏幕和单屏幕之间切换,请点击工具栏中的 devices_fold 图标 Toggle dual-screen mode

已开启双屏幕模式。

设置设备折叠状态

某些设备(例如华硕 Zenbook Fold)具有可折叠屏幕。此类屏幕具有连续或折叠状态。连续模式指的是“平坦”“position”和“folded”在显示屏的两个部分之间形成一个角度。

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

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

显示设备边框

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

显示设备框架。

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

Nest Hub 的设备框架。

添加自定义移动设备

要添加自定义设备,请执行以下操作:

  1. 点击设备列表,然后选择修改

    修改。

  2. 设置 settings 中 >设备标签页,您可以从受支持的设备列表中选择一台设备,或者点击添加自定义设备以添加您自己的设备。

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

    创建自定义设备。

    设备像素比用户代理字符串设备类型字段为选填字段。设备类型字段是默认设置为 Mobile 的列表。

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

显示标尺

点击更多选项 更多选项。 >显示标尺可查看标尺。标尺的尺寸单位是像素。

显示标尺。

DevTools 会在视口的顶部和左侧显示标尺。

视口上方和左侧的标尺。

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

缩放视口

使用缩放列表可以放大或缩小地图。

缩放。

截取屏幕截图

若要截取您在视口中看到的内容的屏幕截图,请依次点击 更多选项。 更多选项 >截取屏幕截图

“更多选项”菜单中的“截取屏幕截图”选项。

若要截取整个网页(包括视口中未显示的内容)的屏幕截图,请在该菜单中选择截取完整尺寸的屏幕截图

如需在设备专用模式下截取屏幕截图时包含设备框架,请先显示设备框架,然后点击截取屏幕截图(如前所述)。

截取包含设备框架的屏幕截图。

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

限制网络流量和 CPU 占用率

要同时限制网络流量和 CPU 使用率,请选择中端移动设备低端移动设备 Throttle 列表。

“节流”列表。

中端移动设备模拟快速 3G 网络,并限制 CPU 速度,使其比速度慢 4 倍 正常。低端移动设备会模拟慢速 3G 网络,并会将 CPU 限制速度降低到正常水平的 6 倍。保留 请记住,限制是相对于笔记本电脑或台式机的正常性能而言的。

请注意,如果设备工具栏较窄,节流列表将隐藏。

仅限制 CPU 占用率

如果只想限制 CPU 占用率,而不限制网络流量,请转到性能面板,然后点击捕获 设置 拍摄设置。 和 然后从 CPU 列表中选择 4 倍变速6 倍变速20 倍变速

CPU 列表。

仅限制网络流量

如果只限制网络流量而不限制 CPU 占用率,请前往 Network 面板,然后选择 Fast 3GThrottle 列表中的 Slow 3G

“节流”列表。

或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)打开 Command 在菜单中,输入 3G,然后选择启用快速 3G 节流启用慢速 3G 节流

命令菜单。

您还可以在性能面板中设置网络节流。点击捕获设置 拍摄设置。,然后选择 网络列表中的 Fast 3GSlow 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 值。

方向