快速打开 Device Mode 并选中 iPhone 或 Android 设备：按 F12 或右键「检查」，点击左上角手机图标或用快捷键 Ctrl+Shift+M（Win/Linux）/Cmd+Shift+M（Mac），再从顶部下拉菜单选择 iPhone 15 Pro、Pixel 7 等预设设备即可，视口自动缩放并模拟触摸事件。
怎么快速打开 Device Mode 并选中 iPhone 或 Android 设备
按 F12 或右键页面点「检查」，再点左上角那个手机+平板图标（或用快捷键 Ctrl+Shift+M / Cmd+Shift+M），就进 Device Mode 了。顶部下拉菜单里直接选 iPhone 15 Pro、Pixel 7 这类预设设备，视口会立刻缩放到对应逻辑宽高（比如 iPhone 15 Pro 是 390×844），同时触发 touchstart 等触摸事件。
注意：选完设备后，页面不会自动刷新，viewport meta 标签必须存在才能让媒体查询按逻辑宽度计算；如果没加，哪怕选了 iPhone，@media (max-width: 768px) 也可能不生效。
为什么 @media 查询没按预期触发
Device Mode 改的是视口尺寸和 UA 字符串，但媒体查询是否匹配，完全取决于页面是否设置了正确的 <meta name="viewport" content="width=device-width, initial-scale=1">。
- 没写 viewport meta → 浏览器用默认视口（通常是
980px），此时拖到400px宽也没用 - 写了
width=1200这种固定值 → 媒体查询基于 1200px 判断，跟设备无关 - 选了
iPad Pro（逻辑宽1024px）但竖屏状态，min-width: 1024px不会命中，得先点工具栏上的Rotate按钮切横屏 - 某些 UA（如 iPad 的）不含
Mobile关键字，导致@media (hover: none) and (pointer: coarse)这类现代查询失效
如何添加自定义设备（比如内部定制屏）
Settings → Devices → Add custom device，填名称、宽高、DPR 和 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写错会导致渲染异常：实际是 1 却写成 2，CSS 中1px会被拉伸成 2 物理像素，字体发虚、图片模糊 - UA 字符串里括号、空格、斜杠必须严格匹配，DevTools 会静默忽略格式错误的条目
- 添加后需关闭并重开 DevTools 才能在设备下拉菜单里看到新设备
哪些问题 Device Mode 根本测不了
它不运行在移动 CPU 上，也不用 iOS Safari 或 Android WebView 的渲染/JS 引擎——所以这些你没法靠它验证：
- iOS Safari 对
flex子项min-width: auto的特殊处理 - Android WebView 中
Intl.DateTimeFormat缺失导致的 JS 报错RangeError: invalid language tag - 真机级的内存限制、GPU 渲染卡顿、后台标签页定时器节流
- 系统级权限弹窗（如地理位置、通知）的交互流程
Device Mode 是布局快筛工具，不是真机替代品；只要涉及渲染差异、引擎行为或系统集成，就得拿真机连远程调试跑一遍。
