使用设备模式可以大致确定网页在移动设备上的外观和性能。
概览
设备模式是 Chrome 开发者工具中可帮助您模拟移动设备的一系列功能的名称。相关功能包括:
限制
您可以将设备模式视为网页在移动设备上的外观和风格的一阶近似值。在设备模式下,实际上不是在移动设备上运行您的代码,您可以在笔记本电脑或台式机上模拟移动用户体验。
移动设备的某些方面是开发者工具无法模拟的。例如,移动设备 CPU 的架构与笔记本电脑或桌面设备 CPU 的架构截然不同。如果不确定,您的最佳选择就是在移动设备上实际运行您的网页。借助远程调试功能,当网页代码实际在移动设备上运行时,您可以在笔记本电脑或台式机上查看、更改、调试和分析网页代码。
打开设备工具栏
如需打开设备工具栏,请按以下步骤操作:
- 打开开发者工具。
- 点击顶部操作栏中的设备 切换设备工具栏。
模拟移动设备视口
默认情况下,设备工具栏会在视口中打开,并将尺寸设为自适应。 您可以使用维度下拉菜单模拟特定移动设备的尺寸。
自适应视口模式
拖动手柄即可将视口大小调整为您需要的任意尺寸。或者,在宽度和高度框中输入具体值。在此示例中,宽度设置为 480
,高度设置为 415
。
或者,您也可以使用宽度预设条将宽度设置为以下任一值:
移动设备 | 中型移动设备 | 左移 | 平板电脑 | 笔记本电脑 | 大码笔记本电脑 | 4K |
---|---|---|---|---|---|---|
320 像素 | 375 像素 | 425 像素 | 768 像素 | 1024 像素 | 1440 像素 | 2560 像素 |
显示媒体查询
如需在视口上方显示媒体查询断点,请依次点击 更多选项 > 显示媒体查询。
现在,开发者工具在视口上方额外显示了两个条形:
- 蓝色条形,包含
max-width
个断点。 - 橙色条形,包含
min-width
个断点。
在断点之间点击可更改视口的宽度,以便触发断点。
如需查找相应的 @media
声明,请右键点击断点,然后选择 Reveal in source code。开发者工具会在编辑器的相应行中打开 Sources 面板。
设置设备像素比
设备像素比 (DPR) 是指硬件屏幕上的物理像素与逻辑 (CSS) 像素之间的比率。也就是说,DPR 会告知 Chrome 使用多少个屏幕像素来绘制 CSS 像素。在 HiDPI(每英寸高点数)显示屏上绘制时,Chrome 会使用 DPR 值。
如需设置 DPR 值,请执行以下操作:
依次点击更多选项 > 添加设备像素比。
在视口顶部的操作栏中,从新的 DPR 下拉菜单中选择一个 DPR 值。
设置设备类型
使用 Device Type 列表来模拟移动设备或桌面设备。
如果您在顶部的操作栏中没有看到该列表,请依次选择更多选项 > 添加设备类型。
下表介绍了这些选项之间的区别。呈现方法是指 Chrome 是将网页呈现为移动设备视口还是桌面设备视口。光标图标是指您将鼠标悬停在页面上时看到的光标类型。触发的事件是指网页在您与网页互动时是否触发了 touch
或 click
事件。
选项 | 呈现方法 | 光标图标 | 触发的事件 |
---|---|---|---|
移动设备 | 移动设备 | 圆形 | 触控输入 |
移动设备(无接触) | 移动设备 | 常规 | 点击 |
桌面设备 | 桌面设备 | 常规 | 点击 |
桌面设备(触摸) | 桌面设备 | 圆形 | 触控输入 |
设备专用模式
若要模拟特定移动设备的尺寸,请从尺寸列表中选择相应设备。
如需了解详情,请参阅添加自定义移动设备。
将视口旋转为横向
点击screen_rotation 旋转,将视口旋转为横向。
请注意,如果设备工具栏较窄,旋转 按钮会消失。
另请参阅设置屏幕方向。
开启/关闭双屏幕模式
Surface Duo 等某些设备具有两个屏幕和两种屏幕使用方式:一个或两个屏幕都处于活动状态。
若要在双屏模式和单屏模式之间切换,请点击工具栏中的 devices_fold 以切换双屏模式。
设置设备折叠状态
某些设备(例如华硕 Zenbook Fold)具有可折叠屏幕。此类屏幕具有折叠状态:连续或折叠。连续折叠状态是指“平展”位置,折叠状态下,显示屏各部分之间会形成一个角度。
如需设置设备折叠状态,请从工具栏中的相应下拉菜单中选择连续模式或折叠状态。
显示设备边框
模拟 Nest Hub 等特定移动设备的尺寸时,请依次选择更多选项 > 显示设备框架,以在视口周围显示实体设备框架。
在此示例中,开发者工具会显示 Nest Hub 的框架。
添加自定义移动设备
如要添加自定义设备:
点击设备列表,然后选择修改。
在设置 设置 > 设备标签页上,从支持的设备列表中选择一个设备,或点击添加自定义设备来添加您自己的设备。
如果您要添加自己的设备,请输入设备的名称、宽度和高度,然后点击添加。
返回视口,从尺寸列表中选择新添加的设备。
显示标尺
点击更多选项 > 显示标尺即可查看标尺。标尺的尺寸调整单位是像素。
开发者工具会在视口的顶部和左侧显示标尺。
点击特定标记处的标尺,以设置视口的宽度和高度。
缩放视口
使用缩放列表可放大或缩小地图。
截取屏幕截图
若要截取您在视口中看到的内容的屏幕截图,请依次点击 更多选项 > 截取屏幕截图。
如需截取整个网页(包括视口中不可见的内容)的屏幕截图,请在同一菜单中选择截取完整尺寸的屏幕截图。
限制网络流量和 CPU
如需同时限制网络流量和 CPU 占用率,请从 Throttle 列表中选择 Mid-tier mobile 或 Low-end mobile。
Mid-tier Mobile 会模拟快速 3G 网络,并限制 CPU 速度,使其比普通性能慢 4 倍。Low-end mobile 可模拟慢速 3G 网络,并将 CPU 节流速度限制在正常水平 6 倍。请注意,限制是相对于笔记本电脑或台式机的正常功能而言。
请注意,如果设备工具栏较窄,Throttle 列表将处于隐藏状态。
仅限制 CPU 占用率
如需仅限制 CPU 占用率,而不限制网络流量,请转到 Performance 面板,点击 Capture Settings 图标 ,然后从 CPU 列表中选择 4 倍减速器或 6 倍减速器。
仅限制网络流量
如需仅限制网络流量,而不限制 CPU 占用率,请转到网络面板,然后从 Throttle 列表中选择 Fast 3G 或 Slow 3G。
或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)打开命令菜单,输入 3G
,然后选择启用快速 3G 节流或启用慢速 3G 节流。
您还可以通过性能面板设置网络节流。点击 Capture Settings 图标 ,然后从 Network 列表中选择 Fast 3G 或 Slow 3G。
模拟传感器
您可以使用传感器面板覆盖地理定位、模拟设备屏幕方向、强制轻触,以及模拟空闲状态。
以下部分将快速介绍如何替换地理定位并设置设备屏幕方向。如需查看完整的功能列表,请参阅模拟设备传感器。
替换地理定位
如需打开地理定位替换界面,请点击 Customize and control DevTools 图标 ,然后选择 More tools > Sensors。
或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)以打开命令菜单,输入 Sensors
,然后选择显示传感器。
从位置列表中选择一个预设,或选择其他...以输入您自己的坐标,或选择无法获取位置,以测试网页在地理定位处于错误状态时的行为方式。
设置屏幕方向
如需打开屏幕方向界面,请点击 Customize and control DevTools 图标 ,然后选择 More tools > Sensors。
或者按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)以打开命令菜单,输入 Sensors
,然后选择显示传感器。
从 Orientation 列表中选择一个预设,或选择 Custom 屏幕方向,设置自己的 alpha、beta 和 gamma 值。