chrome开发工具指南（十二）

时间：2022-09-12 23:49:05

使用 Device Mode 模拟移动设备

使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站。了解如何使用 Device Mode 模拟多种设备及其功能。

警告：Device Mode 可以让您了解您的网站在移动设备上的大致显示效果，但要获得全面的了解，则应始终在真实设备上测试您的网站。DevTools 无法模拟移动设备的性能特性。

简述

切换 Device Mode 按钮可以打开或关闭 Device Mode。

chrome开发工具指南（十二）

当 Device Mode 打开时，该图标呈蓝色 (chrome开发工具指南（十二）)。

当 Device Mode 关闭时，该图标呈灰色 (chrome开发工具指南（十二）)。

测试自适应和设备特定的视口

  • 使用 Device Mode 的屏幕模拟器测试网站的响应能力。
  • 保存自定义预设，便于日后访问。
  • Device Mode 不能替代真实设备测试。请注意它的限制。

利用视口控件，您可以针对各种设备测试网站，以及是否能够实现完全自适应。它包括以下两个模式：

  1. 自适应。使视口可以通过任意一侧的大手柄随意调整大小。
  2. 特定设备。将视口锁定为特定设备确切的视口大小，并模拟特定设备特性。

自适应模式

我们建议将自适应模式用作您的默认工作模式。在您的网站和应用的活动开发期间使用这一模式，并经常调整视口大小以创建完全自适应设计，这种设计可以适应未知和未来的设备类型。

要充分利用自适应模式，请启用媒体查询栏。

自定义视口大小

在视口上拖动调整大小的大手柄，或者点击菜单栏中的值进行精确调整。

特定设备模式

在接近活动开发末期以及想要了解网站在特定移动设备（例如，特定 iPhone 或 Nexus）上的外观时，可以使用特定设备模式。

内置设备预设

我们已在设备下拉菜单中包含了当前最热门的设备。选择设备后，每个预设都会自动配置特定设备特性的模拟：

  • 设置正确的“User Agent”(UA) 字符串。
  • 设置设备分辨率和 DPI（设备像素比）。
  • 模拟触摸事件（如果适用）。
  • 模拟移动设备滚动条叠加和 meta viewport。
  • 自动调整不带已定义视口的页面文本的大小（效果增强）。
chrome开发工具指南（十二）

添加自定义设备预设

Device Mode 提供了多种用于模拟的设备。如果您发现某款边缘或冷门设备未涵盖在内，可以添加自定义设备。

要添加自定义设备，请执行以下操作：

  1. 转至 DevTools 的 Settings 面板。
  2. 点击 Devices 标签。
  3. 点击 Add custom device。
  4. 输入设备名称、宽度、高度、设备像素比和 User Agent 字符串。
  5. 点击 Add。

现在，您的自定义设备将显示在 Device 下拉菜单中。

chrome开发工具指南（十二）

设备状态和方向

chrome开发工具指南（十二）

模拟特定设备时，Device Mode 工具栏会显示另一个控件，主要用于在横向和纵向屏幕方向之间切换。

在选定的设备上，控件不只是可以切换方向。对于支持的设备（如 Nexus 5X），您会获得一个下拉菜单，可以模拟特定设备状态，如：

  • 默认浏览器 UI
  • 显示 Chrome 导航栏
  • 显示打开的键盘
chrome开发工具指南（十二）

缩放到合适大小

有时，您可能想要测试分辨率大于浏览器窗口实际可用空间的设备。这种情况下，Zoom to Fit 选项会很方便：

  1. Fit to Window 会自动将缩放级别设置为最大的可用空间。
  2. 例如，如果您想要测试图像的 DPI，Explicit percentages 会非常有用。
chrome开发工具指南（十二）

可选控件（例如，触摸、媒体查询、DPR）

点击设备工具栏右侧上的三个小圆点，可以更改或启用可选控件。当前选项包括：

  • User Agent 类型（模拟 UA 和触摸事件）
  • 设备像素比
  • 媒体查询
  • 标尺
  • 配置网络（UA、网络节流）
chrome开发工具指南（十二）

继续阅读，详细了解特定选项。

User Agent 类型

User Agent Type 或 Device Type 设置让您可以更改设备的类型。 可能的值为：

  1. Mobile
  2. Desktop
  3. Desktop with touch

更改此设置会影响移动设备视口和触摸事件模拟并更改 UA 字符串。 因此，如果您想要为桌面设备创建自适应网站，且想要测试悬停效果，请在 Responsive 模式下切换到“Desktop”。 ：

提示：您也可以在 Network conditions 抽屉式导航栏中设置 User Agent。

设备像素比 (DPR)

如果您想要从非 Retina 机器上模拟 Retina 设备或者从 Retina 机器上模拟非 Retina 设备，请调整设备像素比。 设备像素比 (DPR) 是逻辑像素与物理像素之间的比率。与普通设备相比，带有 Retina 显示屏的设备（如 Nexus 6P）的像素密度更高，像素密度会影响可视内容的清晰度和大小。

网页上“设备像素比”(DPR) 灵敏度的部分示例如下：

  • CSS 媒体查询，例如：

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

  • CSS image-set 规则。

  • 图像上的 srcset 属性。

  • window.devicePixelRatio 属性。

如果拥有原生 Retina 显示屏，您会注意到较低“每英寸点数”(DPI) 的资源看上去比较模糊，而较高 DPI 的资源比较清晰。 要在标准显示屏上模拟这种效果，请将 DPR 设置为 2 并通过缩放调整视口的大小。2 倍资源看上去还是比较清晰，1 倍资源看上去则比较模糊。

媒体查询

媒体查询是自适应网页设计的基本部分。要查看媒体查询检查器，请在三圆点菜单中点击 Show Media queries。DevTools 会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形。

chrome开发工具指南（十二）

chrome开发工具指南（十二）

用彩色标记的媒体查询示例如下：

 蓝色 针对最大宽度的查询。
 绿色 针对一定范围内宽度的查询。
 橙色 针对最小宽度的查询。

快速预览媒体查询

点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式。

查看关联的 CSS

右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义。

chrome开发工具指南（十二）

标尺

切换此选项可以在视口旁显示基于像素的标尺。

配置网络（UA、网络节流）

选择此选项会在抽屉式导航栏中打开一个面板，您可以在其中更改网络相关行为：

  1. Disk Cache：停用 Disk Cache 将在打开 DevTools 时停止浏览器缓存页面及其资源。
  2. Network Throttling：在此处阅读更多有关网络节流的信息。
  3. User Agent：允许您设置特定的 UA (User Agent) 字符串替换值。

提示：您也可以从主菜单中打开 Network conditions 抽屉式导航栏。

限制

Device Mode 存在一些限制。

  • 设备硬件
  • 无法模拟 GPU 和 CPU 行为。
  • 浏览器 UI
  • 无法模拟系统显示，如地址栏。
  • 无法将原生显示（如 <select> 元素）作为模态列表模拟。
  • 一些增强功能（如数字输入打开小键盘）可能会因实际设备行为不同而不同。
  • 浏览器功能
  • WebGL 可以在模拟器中操作，但 iOS 7 设备不支持 WebGL。
  • Chrome 不支持 MathML，但 iOS 7 设备支持 MathML。
  • 无法模拟 iOS 5 方向缩放错误。
  • 行高 CSS 属性可以在模拟器中操作，但 Opera Mini 不支持行高 CSS。
  • 无法模拟 CSS 规则限制，例如 Internet Explorer 中的规则限制。
  • AppCache
  • 模拟器不会替换 AppCache 清单文件 的 UA 或查看源请求。

尽管存在这些限制，Device Mode 还是十分强大，能够完成大多数任务。 如果需要在真实设备上测试，可以使用远程调试获得其他数据分析。

 

相关文章