模拟移动设备（设备仿真）

使用设备仿真工具（有时称为“设备模式”）来大致了解页面在移动设备上的外观和响应方式。

DevTools 提供以下移动设备仿真功能：

设备仿真 是移动设备上页面外观的 一阶近似 值。 设备仿真 实际上不会在移动设备上运行代码。 相反，你可以从笔记本电脑或台式机模拟移动用户体验。

移动设备的某些方面从不在 DevTools 中模拟。 例如，移动 CPU 的体系结构与笔记本电脑或台式机 CPU 的体系结构不同。 如有疑问，最佳选择是在移动设备上实际运行页面。

当页面实际在移动设备上运行时，使用 远程调试 与计算机中的页面代码进行交互。 在与代码交互时，可以查看、更改、调试、分析或全部四者。 计算机可以是笔记本或台式计算机。

选择“ 切换设备仿真 () 或选择 ”自定义和控制 DevTools (...) >设备仿真 “打开可模拟移动视区的 UI。

默认情况下，设备工具栏在响应式视区模式下打开。

若要跨多个屏幕大小快速测试页面的外观，请拖动手柄以将视区调整为所需尺寸。 可以在宽度和高度框中输入任何数值。 如果选择的大小大于浏览器窗口中的可用大小，则将自动缩放视区以适应较大的视区。

在下图中，宽度设置为 626，高度设置为 516。

如果在屏幕上需要更多空间，可以随时更改 DevTools 的位置，如 更改 DevTools 放置 (Undock、Dock 到底部、停靠到左侧) 中所述。

如果已在页面上定义了媒体查询，请通过在视区上方显示媒体查询断点，跳至视区维度，使这些媒体查询生效。 选择“ 更多选项>”“显示媒体查询”。

选择断点以更改视区宽度，以便触发媒体查询。

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

下表介绍了可用设备类型选项之间的差异。 “渲染方法”列是指 Microsoft Edge 是将页面渲染为移动视区还是桌面视区。 “光标图标”列是指当你将鼠标悬停在页面上时所显示的光标类型。 “触发事件”列是指你与页面交互时页面是触发 touch 还是 click 事件。

注意

如果未显示 “设备类型” 列表，请选择“ 更多选项>”“添加设备类型”。

若要模拟特定移动设备的尺寸，请从“设备”列表中选择该设备。

横向测试你的网页。

若要将视区旋转为横向，请选择“ 旋转 () ：

如果“设备”工具栏较窄，将不显示“旋转”按钮。

如果需要，若要访问“ 旋转 ”按钮，请增加 设备工具栏的宽度。

另请参阅下面的 “设置方向”。

若要模拟特定移动设备的尺寸，请打开“ 更多选项 ”，然后选择“ 显示设备帧 ”以显示视区周围的物理设备帧。

如果未为特定设备显示设备帧，则表示 DevTools 没有该设备的插图。

iPhone 6 的设备帧：

如果默认列表中未包含所需的移动设备选项，则可以添加自定义设备。 添加自定义设备：

选择 “设备 列表 >编辑”。

选择 “添加自定义设备”。

在“仿真设备”上，输入自定义设备的设备名称、屏幕宽度和屏幕高度。 “设备像素比”、“用户代理字符串”和“设备类型”为可选字段。 设备类型字段默认为“移动设备”。

如果需要测量屏幕尺寸，可以使用标尺来测量屏幕大小（以像素为单位）。 选择“ 更多选项>”“显示标尺 ”，以在视区上方和左侧显示标尺。

标尺显示在视区上方和左侧：

若要在多个缩放级别测试页面的外观，请使用“缩放”列表进行缩放。

移动设备通常具有网络和 CPU 限制。 测试页面加载速度以及页面在不同 Internet 和 CPU 速度下的响应方式。

选择“ 限制 列表”，并将预设更改为 “中间层移动” 或 “低端移动”。

所有限制都基于笔记本电脑或桌面设备的正常功能。

如果“限制”列表处于隐藏状态，则表示设备工具栏过窄。

如果需要，若要访问 “限制”列表，请增加 设备工具栏的宽度。

若要仅限制 CPU，而不限制网络，

选择“ 性能 ”面板，然后选择 “捕获设置” (“ ) 。

选择 CPU>4x 或6x 减速。

仅限制网络而不限制 CPU：

选择 “网络 ”工具，然后选择“ 联机>快速 3G ”或“ 慢速 3G”。

或者，按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开 “命令菜单”，开始键入 3g，然后选择“ 启用快速 3G 限制 ”或 “启用慢速 3G 限制”。

还可以从 “性能 ”面板中设置网络限制：

选择 “捕获设置” (“ ) 并选择“ 网络 ”列表，并将预设更改为 “快速 3G ”或 “慢速 3G”。

如果页面依赖于移动设备中的地理位置信息才能正确呈现，请使用地理位置覆盖 UI 提供不同的地理位置。

选择 “自定义和控制 DevTools (...) >更多工具>传感器”。

或者，通过选择 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单。 键入 Sensors ，然后选择“ 显示传感器”。

在 “传感器 ”面板上，若要选择其中一个预设位置，请使用“ 位置 ”下拉菜单。 若要输入自定义位置，请选择“ 其他 ”，然后输入自定义位置的坐标。 若要测试页面在位置信息不可用时的行为方式，请选择“ 位置不可用”。

如果页面依赖来自移动设备的方向信息来正确呈现，请打开方向 UI。

选择 “自定义和控制 DevTools (...) >更多工具>传感器”。

或者，按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单。 键入 Sensors，然后选择“ 显示传感器”。

在 “传感器 ”面板上，可以从“方向”下拉菜单中选择预设 方向 。

若要输入自己的方向，请选择“ 自定义方向”，然后输入你自己的 alpha、 beta 和 gamma 值。

如果页面依赖移动设备中的用户代理字符串来正确呈现，请使用“网络条件”面板提供不同的用户代理字符串。

选择“ 自定义和控制 DevTools (...) >更多工具>网络条件”。

或者，按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单。键入 Network conditions，然后选择“ 显示网络条件”。

在 “用户代理”旁边，清除 “使用浏览器默认 ”复选框。

选择“ 自定义 ”，从预定义的用户代理字符串列表中选择。

若要输入你自己的用户代理字符串，请在“输入自定义用户代理”中输入字符串。

如果站点使用 用户代理客户端提示，请使用 “模拟设备” 面板添加设备并设置用户代理客户端提示。

右键单击网页，然后选择“ 检查”。

选择 “设置>设备”。

在“模拟设备”面板中，选择“ 添加自定义设备 ”并展开 “用户代理客户端提示”。

在 “设备名称” 文本框中键入唯一名称，例如 Test101。

接受默认值，或根据需要更改宽度、高度和设备像素比率。

按如下所示设置用户代理客户端提示：

可以设置或更改任何用户代理客户端提示。 没有必需的值。

单击添加。 新设备以所选状态显示在 “模拟设备” 列表顶部。

还可以在 网络 工具中设置用户代理客户端提示;请参阅 网络功能参考。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。