移动端html测试需分层验证：模拟器仅能筛布局问题，js行为、触摸事件、dpr渲染及ios视口偏差等必须真机测试；chrome设备模式默认不触发@media查询，须选具体设备或启用设备仿真并确认绿色提示条；localhost无法被手机访问，需用局域网ip启动服务；ios safari调试需三步开启web inspector并信任电脑；vh/vw在ios不准因地址栏动态遮挡，推荐js动态计算或-webkit-fill-available；真机特有300ms点击延迟、异步滚动抖动等问题模拟器无法复现。
移动端 HTML 测试不是“打开手机看一眼”就完事，真要过面试或上线前把关，必须分层验证：模拟器能快速筛布局问题，但 JS 行为、触摸事件、dpr 渲染、iOS 视口偏差这些，非真机不可见。
Chrome DevTools 设备模式为啥不触发 @media 查询？
因为默认的 Responsive 模式只是缩放视口，不伪造设备特征。它不会改 navigator.userAgent，也不会让浏览器真正按移动设备逻辑解析 meta name="viewport"。
- 必须手动选一个具体设备（如
iPhone 12），或点齿轮图标 → 勾选Enable device emulation并设置User agent和Screen size - 确认页面顶部出现绿色提示条
Device emulation enabled，否则@media (max-width: 768px)可能根本没执行 -
window.innerWidth会变，但screen.width仍是桌面值——别用它做响应式判断
手机访问 localhost 总是 404 怎么办？
localhost 是回环地址，只对本机有效；手机填 http://localhost:3000，连的是它自己，不是你的电脑。
- 查电脑局域网 IP：
ipconfig（Windows）或ifconfig | grep "inet "（macOS/Linux） - 启动服务时绑定到
0.0.0.0:3000，不是默认的127.0.0.1:3000（例如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；USB 连接后 iPhone 上点“信任此电脑” - 首次连接失败常见原因：
document.write()未清理、console.debug()未注释、页面含 CSP 限制unsafe-eval - 连上后，
Develop → [设备名] → [页面]打开的 Inspector 里，Console默认不输出日志——得手动点右上角 ▶️ 图标启用
vh/vw 在 iOS 上不准，页面被地址栏切掉一块？
iOS Safari 的 vh 是按整个屏幕高度算的，但地址栏展开/收起会动态改变视觉视口，导致元素错位或截断。这不是 bug，是设计如此。
- 别依赖
100vh做全屏容器，尤其带固定底部操作栏的页面 - 用 JS 动态计算：
document.documentElement.clientHeight或监听resize事件更新高度 - CSS 替代方案：
height: 100%+display: flex布局，或用height: -webkit-fill-available（仅 Safari 支持） - 测试时务必手动上下滑动页面，触发地址栏隐藏/显示，观察布局是否突变
最容易被忽略的是：真机上 click 事件有 300ms 延迟，而 touchstart 没有；iOS 的 scroll 是异步且节流的，position: fixed 元素在滚动中会“抖”；这些行为在模拟器里完全无法复现——必须在真机上滑、点、长按、横竖屏切换，才能暴露真实问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
