Chrome 的手机模拟器叫作设备模式（device mode），内置在 Chrome DevTools 中。打开 DevTools，在 Windows 和 Linux 上按 Ctrl + Shift + M，在 Mac 上按 Cmd + Shift + M，从 Dimensions 菜单中选择一款手机，然后刷新页面。Chrome 就会以该手机的视口、像素比和 User Agent 来渲染页面。
本教程逐一介绍日常移动端测试中真正用得上的设置，最后说明设备模式无法呈现的内容。
如何在 Chrome 中打开设备模式
- 打开要测试的页面。
- 打开 DevTools：按
F12、Ctrl + Shift + I（Windows、Linux）或Cmd + Option + I（Mac），也可以右键点击页面并选择检查。 - 点击 DevTools 左上角的 Toggle device toolbar 图标（手机和平板的图案），或在 DevTools 获得焦点时使用上面的快捷键。
- 刷新页面，让网站从第一个请求起就收到移动端 User Agent。
第 4 步最容易被跳过。如果不刷新，在服务器端识别设备的网站早已把桌面版 HTML 发给你了。
选择机型或自定义尺寸
视口上方的 Dimensions 下拉菜单有两种模式。
Responsive 允许你拖动视口边缘或直接输入宽高。用它找出布局开始错乱的精确宽度。视口上方的横条提供预设宽度（Mobile S 320、Mobile M 375、Mobile L 425、Tablet 768、Laptop 1024）作为快捷选项。
具体机型，例如某款 iPhone 或 Pixel，会同时设置宽度、高度、设备像素比和 User Agent。默认列表比较短。点击列表底部的 Edit 可以启用更多设备，点击 Add custom device 可以自定义设备，填写名称、宽度、高度、像素比和 User Agent 字符串。当你关心的手机比 Chrome 列表里的更新时，自定义设备就派上用场了。当前各款 iPhone 的数值见 iPhone 屏幕尺寸与视口一览表。
旋转图标可以在竖屏和横屏之间切换。
模拟低速手机：限制网络和 CPU
电脑比普通手机快好几倍。设备模式可以缩小这个差距：
- 设备工具栏中的 Throttling 菜单提供中端和低端手机预设，会同时降低网速和 CPU 速度。
- 在 Performance 面板中可以单独设置 CPU 降速（例如 4 倍或 6 倍）。
- 在 Network 面板中可以选择 Fast 4G、Slow 4G 或 3G 等网络预设。
限速只是模拟，不是在真实硬件上测量。用它来发现明显的问题，比如某个脚本阻塞渲染长达两秒。如果需要可以写进报告的数据，请参考移动端页面速度测试指南和 Lighthouse 移动端审计教程。
触摸、传感器和其他模拟设置
选择移动设备后，Chrome 会触发触摸事件而不是鼠标事件，光标也会变成一个圆圈。这样可以大致测试滑动轮播和点击处理，不过鼠标的移动方式终究和拇指不同。
设备工具栏的三点菜单还提供更多选项：Show media queries 会把断点显示为彩色条，Show rulers 会添加像素标尺，Add device pixel ratio 和 Add device type 会把这两项设置显示在工具栏上。Sensors 面板（通过命令菜单 Ctrl + Shift + P 或 Cmd + Shift + P 打开）可以覆盖地理位置和设备方向。
在设备模式下截取手机截图
打开设备工具栏的三点菜单，选择 Capture screenshot 截取可见区域，或选择 Capture full size screenshot 截取整个页面。如果选择了具体机型，先开启 Show device frame，截图就会带上手机外框。我们在如何在电脑上截取网页的手机版截图中比较了这种方法和其他方法。
设备模式无法呈现的内容
设备模式同样适用于 localhost。如果想在真机上测试同一个本地服务器，请看手机访问 localhost 的方法。
Chrome 官方文档自己也称设备模式只是“一阶近似”。它的局限是实实在在的：
| 方面 | 设备模式能做什么 | 它做不到什么 |
|---|---|---|
| 渲染引擎 | 使用桌面版 Chrome（Blink） | 呈现 Safari 或 iOS 特有的问题 |
| 性能 | 模拟较慢的 CPU 和网络 | 重现真机的发热降频、内存或 GPU 限制 |
| 输入 | 把鼠标操作转换成触摸事件 | 重现多指手势、拇指可及范围或屏幕键盘的行为 |
| 浏览器界面 | 显示页面区域 | 显示 iOS 和 Android 真实的地址栏、工具栏和安全区域 |
测试 Safari 请使用 Xcode Simulator 或真机 iPhone（教程）。测试真机 Android 上的 Chrome，请连接手机并在电脑上打开 chrome://inspect（教程）。
用设备模式还是手机视图插件？
调试时设备模式更合适：Elements、Console 和 Network 面板就在预览旁边（这些面板的介绍见 Chrome 开发者工具教程）。但如果只是快速看看效果，它的准备工作太多：必须打开 DevTools，而且每个标签页都要重新设置模拟。
Mobile View Extension 一键就能完成视觉检查，无需打开 DevTools。它会应用设备的 User Agent、屏幕尺寸和像素比，显示手机外框，并在你浏览时保持开启。它不会产生触摸事件，所以测试触摸操作仍要用设备模式。两者的取舍详见手机模拟插件与 DevTools 对比。
常见问题
Chrome 手机模拟器的快捷键是什么？
在 DevTools 打开并获得焦点时，Windows 和 Linux 上按 Ctrl + Shift + M，macOS 上按 Cmd + Shift + M。
为什么在设备模式下网站还是桌面版？
选择设备后请刷新页面。有些网站在第一个请求时就决定返回哪个版本，那时模拟的 User Agent 还没有生效。
能在 Chrome 中模拟 iPhone 吗？
可以模拟 iPhone 的屏幕尺寸、像素比和 User Agent。但页面仍由 Chrome 的引擎渲染，而不是 Safari 的 WebKit，所以只在 Safari 中出现的问题不会显示出来。