Chrome DevTools 真模拟需选具体设备或启用设备仿真并确认绿色提示条；真机访问 localhost 需用局域网 IP 或 ngrok；iOS Safari 调试须开启 Web Inspector 并信任电脑；iOS 中 vh/vw 不准因地址栏遮挡，推荐 JS 动态计算或 -webkit-fill-available。
Chrome DevTools 的 Device Mode 怎么开才真模拟？
直接按 F12 打开开发者工具后点左上角的设备图标（Toggle device toolbar）只是第一步。关键在于：默认的 “Responsive” 模式不触发真实 viewport 行为，很多 CSS 媒体查询和 meta name="viewport" 逻辑不会生效。
实操建议：
- 必须在 Device Mode 下手动选一个具体设备（如
iPhone 12或Pixel 5），或点击齿轮图标 → 勾选Enable device emulation并设置User agent和Screen size - 检查页面顶部是否出现绿色提示条显示 “Device emulation enabled”，否则
@media (max-width: 768px)可能压根没运行 - 如果页面有 JS 判断
window.innerWidth或screen.width，记得刷新后观察值——Device Mode 不会自动更新screen对象，但会正确设置window.innerWidth
为什么真机访问 localhost 页面总 404？
开发机的 localhost 对手机是不可见的，这是网络层问题，不是代码 bug。
解决路径只有两条：
立即学习“前端免费学习笔记（深入）”；
- 用局域网 IP 启服务：查开发机 IP（
ipconfig或ifconfig），把本地服务绑定到0.0.0.0:3000（而非默认127.0.0.1:3000），然后手机浏览器访问http://192.168.x.x:3000 - 用反向代理工具：比如
ngrok http 3000生成公网临时地址，适合调试 HTTPS、WebSockets 或跨域场景；注意免费版域名每小时轮换 - 避坑：别用
127.0.0.1或localhost直接填进手机浏览器——它连的是手机自己的 loopback，不是你的电脑
Safari Web Inspector 调试 iOS 真机页面卡在哪？
iOS 端 Safari 的远程调试能力很强，但开关藏得深，且依赖 macOS + 物理线缆。
必须完成的三步：
- iOS 设置 → Safari → 高级 → 开启
Web Inspector - macOS Safari → 偏好设置 → 高级 → 勾选
Show Develop menu in menu bar - 用 USB 连接 iPhone，在 macOS Safari 的
Develop菜单里找到你的设备名 → 展开后选中对应页面；首次连接需在 iPhone 上点“信任此电脑” - 常见失败原因：iOS 版本 > 16.4 时，若页面含
document.write()或未关闭console.debug()，Inspector 可能卡在空白状态——先注释掉再连
CSS 视口单位（vh/vw）在 iOS Safari 里为啥不准？
因为 iOS Safari 的地址栏和底部工具栏会动态遮挡视口，100vh 实际等于「整个屏幕高度」，而不是当前可视区域高度，导致内容被截断或留白异常。
更稳妥的替代方案：
- 用 JS 动态计算：
document.documentElement.clientHeight替代100vh，并在resize事件里更新 —— 注意 iOS 的 resize 触发很迟滞，建议加防抖 - 纯 CSS 方案：用
min-height: -webkit-fill-available（仅 Safari 支持），或结合env(safe-area-inset-bottom)处理刘海屏 - 测试时别只看 Chrome 模拟器结果，真机滚动后立刻验证 —— 这个问题在模拟器里根本复现不出来
移动端调试最耗时间的往往不是代码写错，而是环境链路断在某个隐性环节：比如设备没开调试权限、IP 绑定错了网卡、Safari 的 Web Inspector 被系统版本锁住……每次卡住前，先确认这三件事：网络通不通、调试开关开没开、视口行为是不是真在起效。
