用Chrome DevTools设备模拟最高效，可选预设机型、手动调节视口、验证横竖屏及媒体查询生效情况；真机联调补测触摸、地址栏遮挡等场景；需加viewport meta、避免max-height断点、按CSS像素设媒体查询值。
直接用浏览器开发者工具模拟真实设备是最高效的方式，不用到处找真机。
用 Chrome DevTools 快速切换设备类型
打开开发者工具（F12 或 Ctrl+Shift+I），点击左上角的设备切换图标（?），进入响应式调试模式。你可以：
- 从预设列表中选择 iPhone SE、iPhone 13 Pro、iPad Pro 等常见机型，它会自动设置对应视口宽度、DPR 和 UA
- 点击“Responsive”后手动拖动窗口边缘，实时观察断点是否平滑触发——不是跳变，而是随宽度连续生效
- 在顶部工具栏开启横竖屏旋转按钮，验证 orientation 媒体查询是否正确响应
检查样式是否命中目标规则
选中一个视频容器或导航栏元素，在右侧的Computed面板里滚动到底部，展开Media queries区域。这里会明确列出：
- 当前生效的媒体查询条件（例如
@media (min-width: 415px)） - 哪些 CSS 属性是由该查询注入的
- 哪些被更高优先级规则覆盖（方便排查样式未生效的原因）
真机联调补充验证
开发工具不能完全替代真机，尤其涉及地址栏动态遮挡、触摸反馈、画中画或字幕渲染时：
立即学习“前端免费学习笔记（深入）”；
- 用 USB 连接 Android 手机，在 Chrome DevTools 的Remote Devices中调试页面
- iOS Safari 需通过 Mac 的Web Inspector（Safari 开发菜单 → 勾选“开发”→ 选择设备和页面）
- 重点测试小屏下字幕可点区域是否 ≥44px、控件图标是否清晰、
max-width: 100%是否防止溢出
避免常见误判陷阱
有些现象看着像“没生效”，其实是检测逻辑本身出了问题：
- 忘了在
<head>加<meta name="viewport" content="width=device-width, initial-scale=1">，媒体查询会基于 980px 默认视口判断，所有max-width: 414px规则都失效 - 用了
max-height断点——地址栏收起/展开会让window.innerHeight突变，导致样式闪动或错配 - 断点值写成物理像素（如 1170px），但媒体查询单位是 CSS 像素，应换算为逻辑宽度（iPhone 13 Pro 是 414px）
