使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站。了解如何使用 Device Mode 模拟多种设备及其功能。
警告：Device Mode 可以让您了解您的网站在移动设备上的大致显示效果，但要获得全面的了解，则应始终在真实设备上测试您的网站。DevTools 无法模拟移动设备的性能特性。
简述
- 在不同的屏幕尺寸和分辨率（包括 Retina 显示屏）下模拟您的网站。
- 通过可视化和检查 CSS 媒体查询进行自适应设计。
- 使用网络模拟器在不影响其他标签流量的情况下模拟您网站的性能。
- 针对触摸事件、地理定位和设备方向准确模拟设备输入
切换 Device Mode 按钮可以打开或关闭 Device Mode。
当 Device Mode 打开时，该图标呈蓝色 ()。
当 Device Mode 关闭时，该图标呈灰色 ()。
测试自适应和设备特定的视口
- 使用 Device Mode 的屏幕模拟器测试网站的响应能力。
- 保存自定义预设，便于日后访问。
- Device Mode 不能替代真实设备测试。请注意它的限制。
利用视口控件，您可以针对各种设备测试网站，以及是否能够实现完全自适应。它包括以下两个模式：
- 自适应。使视口可以通过任意一侧的大手柄随意调整大小。
- 特定设备。将视口锁定为特定设备确切的视口大小，并模拟特定设备特性。
自适应模式
我们建议将自适应模式用作您的默认工作模式。在您的网站和应用的活动开发期间使用这一模式，并经常调整视口大小以创建完全自适应设计，这种设计可以适应未知和未来的设备类型。
要充分利用自适应模式，请启用媒体查询栏。
自定义视口大小
在视口上拖动调整大小的大手柄，或者点击菜单栏中的值进行精确调整。
特定设备模式
在接近活动开发末期以及想要了解网站在特定移动设备（例如，特定 iPhone 或 Nexus）上的外观时，可以使用特定设备模式。
内置设备预设
我们已在设备下拉菜单中包含了当前最热门的设备。选择设备后，每个预设都会自动配置特定设备特性的模拟：
- 设置正确的“User Agent”(UA) 字符串。
- 设置设备分辨率和 DPI（设备像素比）。
- 模拟触摸事件（如果适用）。
- 模拟移动设备滚动条叠加和 meta viewport。
- 自动调整不带已定义视口的页面文本的大小（效果增强）。
添加自定义设备预设
Device Mode 提供了多种用于模拟的设备。如果您发现某款边缘或冷门设备未涵盖在内，可以添加自定义设备。
要添加自定义设备，请执行以下操作：
- 转至 DevTools 的 Settings 面板。
- 点击 Devices 标签。
- 点击 Add custom device。
- 输入设备名称、宽度、高度、设备像素比和 User Agent 字符串。
- 点击 Add。
现在，您的自定义设备将显示在 Device 下拉菜单中。
设备状态和方向
模拟特定设备时，Device Mode 工具栏会显示另一个控件，主要用于在横向和纵向屏幕方向之间切换。
在选定的设备上，控件不只是可以切换方向。对于支持的设备（如 Nexus 5X），您会获得一个下拉菜单，可以模拟特定设备状态，如：
- 默认浏览器 UI
- 显示 Chrome 导航栏
- 显示打开的键盘
缩放到合适大小
有时，您可能想要测试分辨率大于浏览器窗口实际可用空间的设备。这种情况下，Zoom to Fit 选项会很方便：
- Fit to Window 会自动将缩放级别设置为最大的可用空间。
- 例如，如果您想要测试图像的 DPI，Explicit percentages 会非常有用。
可选控件（例如，触摸、媒体查询、DPR）
点击设备工具栏右侧上的三个小圆点，可以更改或启用可选控件。当前选项包括：
- User Agent 类型（模拟 UA 和触摸事件）
- 设备像素比
- 媒体查询
- 标尺
- 配置网络（UA、网络节流）
继续阅读，详细了解特定选项。
User Agent 类型
User Agent Type 或 Device Type 设置让您可以更改设备的类型。 可能的值为：
- Mobile
- Desktop
- 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 会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形。
用彩色标记的媒体查询示例如下：
| 蓝色 | 针对最大宽度的查询。 |
| 绿色 | 针对一定范围内宽度的查询。 |
| 橙色 | 针对最小宽度的查询。 |
快速预览媒体查询
点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式。
查看关联的 CSS
右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义。
标尺
切换此选项可以在视口旁显示基于像素的标尺。
配置网络（UA、网络节流）
选择此选项会在抽屉式导航栏中打开一个面板，您可以在其中更改网络相关行为：
- Disk Cache：停用 Disk Cache 将在打开 DevTools 时停止浏览器缓存页面及其资源。
- Network Throttling：在此处阅读更多有关网络节流的信息。
- 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 还是十分强大，能够完成大多数任务。 如果需要在真实设备上测试，可以使用远程调试获得其他数据分析。