在移动互联网时代，一个网页要在手机上能正常浏览，已经是最基本的要求了。但对于前端开发者来说，一个很现实的问题是：我们不可能拥有所有型号的手机来逐一测试。
iPhone 有十几种型号，Android 手机更是成百上千——屏幕尺寸、像素密度、浏览器行为各不相同。你不可能全部买来一一测试，但你又必须确保页面在这些设备上都能正常工作。
Chrome DevTools 的设备模式（Device Mode） 就是为了解决这个问题而生的。
设备模式是一系列功能的统称，让你在笔记本电脑或台式机上就能模拟移动设备的浏览体验。你可以模拟不同手机的屏幕尺寸、像素密度，甚至还能模拟地理位置、设备方向等传感器数据。
但需要注意的是——设备模式是一个近似模拟，而不是精确还原。移动设备的 CPU 架构、触摸交互的物理手感、网络环境的真实波动，这些都是 DevTools 无法完全模拟的。当你有疑问时，最终还是要用真机配合远程调试来验证。
不过，在日常开发中，设备模式已经能覆盖 90% 的移动端调试需求。学会它，你就拥有了“在电脑上测试所有手机”的能力。
小提示：这一章的内容非常实操。建议你一边读一边打开 DevTools 的设备模式跟着操作，亲眼看看页面在不同“手机”上的变化。
一、什么是设备模式？
简单来说，设备模式是 Chrome DevTools 中帮助你在桌面端模拟移动设备的一系列功能的总称。
它主要做三件事：
模拟移动视口：把浏览器窗口缩小到手机屏幕的大小，让你看到页面在手机上的布局效果。
模拟设备特性：模拟不同设备的像素密度、触摸事件、设备方向等。
模拟网络和性能：通过限制 CPU 和网络速度，模拟中低端移动设备的真实性能表现。
它不能做什么？
设备模式有一个重要的局限性：它是在你的笔记本电脑或台式机上运行的，而移动设备的 CPU 架构和桌面设备完全不同。这意味着：
页面在设备模式下的运行速度，不等于它在真实手机上的速度。
某些与硬件相关的 bug（比如触摸事件、传感器相关的问题）可能无法在模拟中复现。
所以，记住一句话：设备模式是“一阶近似” ——它能帮你快速发现大部分问题，但最终上线前，最好还是用真机做一次验证。
二、如何打开设备模式？
方式一：点击工具栏图标（最直观）
打开 DevTools（按 F12 或 Ctrl/Cmd + Shift + I）。
点击 DevTools 左侧顶部，即Elements面板左侧的切换设备工具栏图标。
点击之后，页面视口会立即缩小，并出现一个模拟手机屏幕的框架。
方式二：键盘快捷键（最快）
操作系统 | 快捷键 |
|---|---|
Windows / Linux | Ctrl + Shift + M |
Mac | Command + Shift + M |
这是我们在第七章学过的快捷键。按一次进入设备模式，再按一次退出。
方式三：通过命令菜单
打开命令菜单（Ctrl/Cmd + Shift + P），输入 device 或 设备，选择 “Toggle Device Mode” 并回车。
小建议：日常开发中，推荐用快捷键 Ctrl/Cmd + Shift + M 来快速切换设备模式——手指不用离开键盘，一秒切换。
三、模拟移动视口
打开设备模式后，你会看到页面被包裹在一个“手机屏幕”的框架中。默认情况下，视口的尺寸设置为自适应（Responsive） 。
自适应视口模式
在自适应模式下，你可以自由调整视口的大小：
拖拽手柄：拖动视口边框上的手柄，随意拉伸到任何尺寸。
输入数值：在顶部的宽度和高度输入框中直接输入精确的像素值。
这个模式特别适合做“极限测试”——你可以把视口拉到极窄（比如 280px）看看页面会不会崩溃，或者拉到极宽看看最大布局的效果。
选择特定设备
如果你需要模拟某一款具体手机的尺寸（比如 iPhone 15 Pro 或 IPad Pro），可以从Standard(上文提到的Responsive下面）列表中选择目标设备，选择之后，视口会自动调整到该设备的精确尺寸和像素比。
切换横屏/竖屏
在设备工具栏（浏览器标签栏下方）中，点击旋转（Rotate）按钮（一个带弧形箭头的图标），可以快速在横屏和竖屏模式之间切换。这个功能特别重要——很多页面在竖屏下完美显示，横屏下却一团糟。别忘了测试两种方向。
设备工具栏上还提供了更多实用控件，建议您自行操作探索。
四、显示媒体查询：调试响应式的利器
这是设备模式中一个非常强大的功能，当你打开设备模式后，点击设备工具栏右侧（⋮）菜单，然后选择显示媒体查询（Show media queries） 。开启后，视口上方会出现两个额外的彩色条：
蓝色条：显示 max-width 断点（“宽度小于等于 X 时生效”）。
橙色条：显示 min-width 断点（“宽度大于等于 X 时生效”）。
这意味着什么？
你可以直接点击蓝色或橙色条上的某个位置，视口宽度会自动调整到对应的断点值，触发相应的 CSS 规则。你不需要手动拖拽视口一点点找断点——点击一下，就能精确触发。
注意：在 Responsive 下，才能看到模拟视口的变化。
更厉害的是：在两个断点之间右键点击，选择“在源代码中显示（Reveal in source code）” ，DevTools 会直接在 Sources 面板中打开对应的 CSS 文件，并定位到那条 @media 规则。
小建议：当你调试响应式布局时，先开启“显示媒体查询”。看一眼蓝色和橙色的条，你就能立刻知道这个页面在哪些宽度下会发生变化——比在 CSS 文件里翻找快多了。
五、设备像素比（DPR）
你可能会注意到，同样 375px 宽的屏幕，在不同手机上显示的效果不一样——有的很清晰，有的有点模糊。这是因为不同手机的设备像素比（Device Pixel Ratio，简称 DPR） 不同。
DPR 是什么？
简单来说，DPR 是硬件屏幕上的物理像素与 CSS 像素之间的比率。比如：
DPR = 1：1 个 CSS 像素对应 1 个物理像素（普通屏幕）。
DPR = 2：1 个 CSS 像素对应 4 个物理像素（2×2 网格），显示更细腻（视网膜屏幕）。
DPR = 3：1 个 CSS 像素对应 9 个物理像素（3×3 网格），更细腻。
如何在设备模式中设置 DPR？
点击设备工具栏右侧（⋮）菜单，选择添加设备像素比（Add device pixel ratio）。
在视口顶部的工具栏中，从新出现的 DPR 下拉菜单中选择一个值。
常见的 DPR 值：
1：普通屏幕。
2：大多数视网膜屏幕（如 iPhone 8）。
3：高端视网膜屏幕（如 iPhone 15 Pro）。
当你选择特定设备时（比如 iPhone 15 Pro），DPR 会自动设置为该设备的正确值，一般不需要手动调整。
小建议：当你在检查图片是否清晰、或者 1px 边框在不同设备上是否显示正常时，记得切换 DPR 值看看效果。
六、设置设备类型
设备模式不仅可以模拟手机，还可以在“移动设备”和“桌面设备”两种渲染模式之间切换。
如何设置？
在视口顶部的操作栏中，找到 Dimensions 下拉菜单，从中选择相应设备。如果没有，可点击下拉菜单底部的 Eidt… , 进入 Devices 设置页面进行设置。
七、模拟传感器：地理位置、设备方向等
设备模式不仅仅能模拟屏幕——它还能模拟移动设备的各种传感器。
在 DevTools 中，点击右上角的三个点菜单，选择 更多工具（More tools） → 传感器（Sensors） ，会打开一个专门的面板。
在传感器面板中，你可以模拟：
地理位置（Location） ：手动设置经纬度，或者从预设的城市列表中选择（比如伦敦、东京、纽约），测试基于位置的服务。
设备方向（Orientation） ：模拟手机旋转、倾斜的角度，测试横屏/竖屏切换和陀螺仪相关的功能。
强制触摸（Force Touch） ：模拟压力触控。
这些功能对于开发地图应用、游戏、或者任何依赖传感器数据的页面来说非常实用。
小建议：传感器面板不在默认的标签栏中，需要从“更多工具”里打开。第一次用的时候找一下位置，之后就熟悉了。
八、模拟网络和性能：测试“慢手机”
这是设备模式中最容易被忽视、但也最有价值的功能之一。
在真实世界中，用户不都用着最新款的旗舰手机。很多人用的是中低端设备，网络状况也可能不太好。你的页面在这些设备上体验如何？
设备模式允许你通过限制 CPU 和网络速度来模拟中低端设备的性能。
如何操作？
在设备工具栏中，点击 No throttling，从下拉菜单中选择所需选项。Presets（预设）中提供了 Fast 4G、Slow 4G 等选项，也可以点击 Custom 下方的 Add 添加自定义设置。
九、设备模式的局限性
最后，再强调一次设备模式的局限性。
设备模式是一个“近似模拟”，不是“精确还原”。
具体来说，以下这些方面是 DevTools 无法模拟的：
CPU 架构差异：手机用的是 ARM 架构，电脑用的是 x86 架构，两者的性能特性完全不同。
真实的触摸手感：手指触摸的物理反馈、多点触控的精确性，在鼠标上无法完全还原。
网络环境的波动：真实移动网络会不断变化，而限速模拟是恒定的。
电池和散热：手机发热会降频，这个 DevTools 模拟不了。
硬件加速的差异：不同设备的 GPU 性能差异很大。
所以，设备模式是你的“第一道防线”——用它来快速发现和修复大部分问题。但在项目上线前，最好还是用真机配合远程调试做一次完整验证。
小建议：如果你有预算，团队里备几款主流的测试机（比如一部华为，一部 iPhone、一部中端 Android、一部低端 Android）。真机测试和模拟测试结合，才是最稳妥的策略。
总结
在这一章中，我们系统学习了设备模式：
它是什么：Chrome DevTools 中用于模拟移动设备的一系列功能的总称。
怎么打开：点击工具栏的手机图标、快捷键 Ctrl/Cmd + Shift + M、或通过命令菜单。
核心功能：
模拟移动视口：自由拖拽调整尺寸、使用预设宽度、或选择特定设备。
显示媒体查询：可视化查看 min-width 和 max-width 断点，点击即可触发。
设备像素比（DPR） ：模拟不同屏幕的像素密度。
设备类型：在移动设备和桌面设备渲染模式之间切换。
传感器模拟：模拟地理位置、设备方向等。
网络和 CPU 限速：模拟中低端设备的真实性能。
局限性：设备模式是“一阶近似”，不能完全替代真机测试。
设备模式是移动端开发的必备工具。掌握了它，你就能在开发过程中随时检查页面在不同“手机”上的表现，把大部分问题消灭在编码阶段。
下一章预告：我们将学习 DevTools 的搜索功能——如何在当前面板和所有文件中快速查找内容，帮你在大型项目中快速定位代码。
本章练习
打开任意一个你喜欢的网页，按 Ctrl/Cmd + Shift + M 进入设备模式。观察页面发生了什么变化。
从设备工具栏Dimensions 右侧下拉菜单中选择一款 iPhone（比如 iPhone SE），观察视口尺寸的自动变化。
打开显示媒体查询（Show media queries），观察视口上方出现的蓝色和橙色条。点击不同位置，看看视口宽度如何变化。
在设备模式下，点击旋转按钮切换横屏/竖屏，看看页面在两种方向下的表现。
