如何高效进行HTML页面兼容性测试？多平台调试工具推荐！

本文共计847个文字，预计阅读时间需要4分钟。

使用Chrome DevTools的设备模拟功能，本地HTTP服务，以及真机局域网访问，可以有效覆盖80%的兼容性问题。云平台或虚拟机并非必需，反而更易掩盖真机渲染差异。

Chrome Device Mode 怎么开才真正生效

点设备图标只是入口，不等于启用真实 viewport 行为。很多 @media 查询和 meta name="viewport" 逻辑在默认 “Responsive” 模式下根本不会触发。

• 必须手动选一个具体设备（如 iPhone 12 或 Pixel 5），或点击齿轮图标 → 勾选 Enable device emulation 并设置 UA 和屏幕尺寸
• 页面顶部出现绿色提示条 “Device emulation enabled” 才算成功，否则 @media (max-width: 768px) 可能压根没运行
• window.innerWidth 会被正确模拟，但 screen.width 不会更新——如果 JS 里用了后者做判断，得手动刷新后观察值

为什么真机访问 localhost 总是 404

这不是代码问题，是网络层限制：手机的 localhost 指向它自己，不是你的开发机。