Chrome DevTools Device Mode通过F12或右键“检查”打开，点击左上角手机图标或按Ctrl+Shift+M（Win/Linux）/Cmd+Shift+M（Mac）启用，再从顶部下拉菜单选择iPhone 15 Pro等预设设备即可模拟对应视口、UA及触摸事件。
Chrome DevTools 的 Device Mode 不是真机运行，它只改视口尺寸、UA 字符串和基础媒体查询行为——能快速验证布局是否断裂，但无法替代真机测试 iOS Safari 的 Flexbox 渲染差异或 Android WebView 的 JS 执行偏差。
怎么打开 Device Mode 并选中目标设备
在 Chrome 中打开页面后，按 F12 或右键「检查」；点击左上角 Toggle device toolbar 图标（手机+平板叠在一起的图标），或用快捷键 Ctrl+Shift+M（Windows/Linux）/Cmd+Shift+M（macOS）。进入后，顶部下拉菜单可选预设设备，比如 iPhone 15 Pro、Pixel 7 或 Responsive。选中后视口自动缩放到对应宽高，并模拟触摸事件（touchstart 等事件会被触发）。
为什么选了 iPhone 14 却没触发 @media (max-width: 768px)
Device Mode 模拟的是设备的逻辑视口（viewport），不是 CSS 媒体查询中的 width 媒体特性值。例如 iPhone 14 的逻辑宽度是 390px，但如果你页面里写了 <meta name="viewport" content="width=device-width, initial-scale=1">，那媒体查询就基于这个 390px 判断，而不是物理像素 1170px。常见误判点：
-
Responsive模式下手动拖拽视口到 800px 宽，但页面未设置 viewport meta，此时媒体查询仍按浏览器默认视口（通常 980px）计算 - 选了
iPad Pro（逻辑宽 1024px），但页面用了min-width: 1024px，而 iPad 默认是竖屏，需先点Rotate按钮切到横屏才匹配 - 某些 UA 字符串不带
Mobile关键字（如部分 iPad UA），导致@media (hover: none) and (pointer: coarse)这类现代查询不生效
如何添加自定义设备（比如公司内部定制屏）
DevTools 支持手动注册新设备：打开 Settings → Devices → Add custom device，填入名称、宽高、DPR（device pixel ratio）、UA 字符串。例如某工业屏是 1280×800、DPR 1、UA 为 Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 CustomPanel/1.0。注意两点：
立即学习“前端免费学习笔记（深入）”；
- DPR 写错会导致字体模糊或图片拉伸（比如写成
2但实际是1，CSS 中1px会渲染成 2 物理像素） - UA 字符串里不要漏掉空格或括号，否则 DevTools 会静默忽略该设备
- 添加后需重启 DevTools 才能在下拉菜单中看到
Device Mode 下哪些东西根本测不了
它不模拟真实设备的渲染引擎、JS 引擎或系统级限制：
- iOS Safari 对
position: sticky的支持比 Chrome Desktop 严格得多，Device Mode 里看起来正常，真机上可能完全失效 - Android WebView 的
Intl.DateTimeFormat格式化行为与桌面 Chrome 不同，Device Mode 不会暴露这类差异 - 触控延迟、滚动惯性、3D transform 性能、
will-change实际效果，全靠真机验证 - 网络节流（Throttling）只影响资源加载速度，不影响 JS 执行时序或内存压力表现
真正关键的兼容性问题，往往出现在真机连上远程调试之后——比如用 macOS Safari 连 iPhone 查看 console.error 输出，或用 Chrome 远程调试 Android 设备的 Performance 面板。
