Chrome设备模拟器不触发@media查询，主因是未启用设备模拟或viewport meta标签缺失；必须选具体设备、启用设备模拟并确保存在且位置正确。
Chrome设备模拟模式为啥不触发@media查询
默认按Ctrl+Shift+M进的“Responsive”模式只是缩放窗口，不会伪造设备特征，@media (max-width: 768px)很可能压根没执行。它不改navigator.userAgent，也不真正启用meta name="viewport"逻辑。
必须手动选一个具体设备（如Pixels 5或iPhone 12），或点齿轮图标 → 勾选Enable device emulation并设置User agent和Screen size；顶部出现绿色提示条Device emulation enabled才算生效。
window.innerWidth会随模拟器变化，但screen.width仍是桌面值——别拿它做响应式判断依据。
手机访问localhost总404，怎么连上本地HTML
这不是代码问题，是网络层限制：localhost对手机来说就是它自己，不是你的电脑。
立即学习“前端免费学习笔记（深入）”；
- 查开发机局域网IP：
ipconfig（Windows）或ifconfig | grep "inet "（macOS/Linux） - 启动服务时绑定到
0.0.0.0:8000，不是默认的127.0.0.1:8000：例如python3 -m http.server 8000 --bind 0.0.0.0:8000 - 手机浏览器访问
http://192.168.x.x:8000/index.html（注意 macOS 防火墙可能拦截，需放行 Python） - 需要 HTTPS 或 WebSocket？用
ngrok http 8000，但免费版域名每小时轮换
iOS Safari真机调试连不上、控制台空白
不是代码卡死，是 Web Inspector 握手失败。iOS 16.4+ 对调试入口更敏感，稍有不合规就白屏。
三步缺一不可：
- iOS 设置 → Safari → 高级 → 开启
Web Inspector - macOS Safari → 偏好设置 → 高级 → 勾选
Show Develop menu in menu bar - USB 连接后，iPhone 上弹出“信任此电脑”必须点确认
首次连接失败常见原因：document.write()未清理、console.debug()未注释、页面含 CSP 限制unsafe-eval；连上后，Console 默认不输出日志——得手动点右上角 ▶️ 图标启用。
为什么加了viewport标签，真机上还是文字挤、按钮点不中
标签位置或参数不对是最常见原因：<meta name="viewport">必须放在最前面，否则部分浏览器会忽略；漏掉initial-scale=1.0，iOS Safari 就会强制缩放。
别写user-scalable=no——它禁用双指缩放，影响可访问性，也违反 WCAG；也别只写width=device-width，那是半残配置。
推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0">；如果要防双击放大，用maximum-scale=1.0，但慎用。
真机特有行为模拟器完全看不到：iOS 的vh不准（地址栏动态遮挡）、300ms 点击延迟、键盘顶起页面导致position: fixed错位、微信 UA 拦截、安卓厂商浏览器私有渲染……这些必须真机跑一遍才敢上线。
