真机测试前必须设置正确的 viewport，如 width=device-width 和 initial-scale=1；模拟器与真机差异源于像素比、触摸延迟和字体渲染；iOS 真机调试需开启 Safari Web 检查器并禁用私密模式；响应式断点失效多因样式顺序、max-device-width 弃用或单位混用。
真机测试前必须检查的 viewport 设置
很多布局在模拟器里正常，一上真机就缩成一团或横向滚动，大概率是 viewport 元素漏了或写错了。iOS Safari 和安卓 WebView 对 viewport 的解析非常严格，缺一个属性就可能触发默认缩放。
-
width=device-width必须有，不能写成width=375这类固定值 -
initial-scale=1要显式声明，否则某些安卓机型会按 0.8 左右初始缩放 - 避免使用
user-scalable=no—— 它在 iOS 10+ 上已失效，还可能干扰可访问性检测 - 示例正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Chrome DevTools 模拟器和真机表现不一致的三个常见原因
不是模拟器不准，而是它默认忽略了一些真实硬件层面的限制，比如像素密度、触摸事件延迟、字体渲染策略。
- 设备像素比（
window.devicePixelRatio）被模拟器硬设为整数（如 2 或 3），但部分中端安卓机实际是 2.75，导致rem或vw计算偏移 - 模拟器不触发
touchstart的 300ms 延迟逻辑，而真机上若没加fastclick或touch-action: manipulation，按钮点击会“卡一下” - CSS
font-smoothing在 iOS 上默认开启，安卓原生 WebView 却常关闭，文字边缘发虚——这不是 bug，是渲染引擎差异
用 Safari Web Inspector 连接 iOS 真机调试的实际步骤
很多人卡在“看不到设备”或“无法选中元素”，问题通常出在系统级配置，而不是前端代码。
- iOS 端必须打开：设置 → Safari → 高级 → 开启「Web 检查器」
- Mac 端 Safari 需启用开发菜单：Safari → 偏好设置 → 高级 → 勾选「在菜单栏中显示“开发”菜单」
- 连接后，真机 Safari 打开页面，Mac Safari 的「开发」菜单里才会出现你的设备名；若无响应，先拔插 USB 线，再重启手机上的 Safari
- 真机上不要用「私密窗口」——私密模式下 Web Inspector 不可用
- 调试时禁用「Disable Cache」选项（DevTools 的 Network 标签页右上角），否则某些 CSS 变更不会实时生效
响应式断点失效时优先排查的三处 CSS 来源
断点没触发？别急着改 @media，90% 是样式加载顺序、层叠或单位混用导致的。
立即学习“前端免费学习笔记（深入）”；
- 检查是否引入了第三方 UI 库（如 Bootstrap）的 CSS 在你自己的样式表之后，它的
@media会覆盖你的规则 - 确认媒体查询里用的是
max-width还是max-device-width—— 后者已被现代浏览器弃用，且在桌面 Chrome 模拟器里根本不会匹配 - 避免在同一个选择器里混用
px和rem做断点判断，比如@media (max-width: 48rem)对应的是根字号为 16px 时的 768px，一旦设计稿用 10px 基准，断点就全偏了 - 快速验证方法：在 DevTools 控制台执行
matchMedia('(max-width: 768px)').matches，看返回true还是false
真机调试最耗时间的从来不是写代码，而是识别「到底是样式没生效，还是样式生效了但被更高优先级的规则压住了」。多试几次 getComputedStyle 和强制刷新，比反复改断点数值管用得多。
