Chrome DevTools 里怎么精准模拟 iPhone 14 的 viewport
直接用设备预设不等于真实效果，iPhone 14 在 DevTools 的设备列表里对应的是 393×852 像素（逻辑像素），但关键在 devicePixelRatio 必须设为 3，否则媒体查询里的 min-resolution: 3dppx 或 min--webkit-device-pixel-ratio: 3 就不会触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools →
Toggle device toolbar→ 点右上角⋯→Edit…→ 新增设备，填入width: 393,height: 852,dpr: 3 - 别依赖“iPhone”下拉选项——它有时默认用
dpr: 2，导致高清图没加载、字体渲染发虚 - 检查页面是否启用了
viewportmeta 标签：<meta name="viewport" content="width=device-width, initial-scale=1">，缺这个，模拟尺寸会失效
媒体查询断点没生效？先看 computed 样式里的 actual width
你写的 @media (max-width: 768px) 没生效，大概率不是 CSS 写错了，而是 DevTools 显示的宽度值不是你认为的那个“宽度”——它显示的是 layout viewport 宽度（含滚动条），而媒体查询依据的是 innerWidth（不含滚动条）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板选中
<html>或<body>，右侧Computed标签页里找width，对比左上角设备工具栏显示的数值，差 15–20px 很可能就是滚动条占位 - 临时加一句
document.body.style.overflow = 'hidden'再测，排除滚动条干扰 - 用
window.matchMedia("(max-width: 768px)").matches在 Console 直接验证，比肉眼判断更可靠
flex/grid 在不同设备上错位？检查 min-width 和 content-fit
响应式布局崩坏最常发生在图片、卡片、表单控件这类有固有尺寸的元素上。比如一个 <img> 设了 width: 100%，但父容器没设 max-width: 100%，在小屏上就会撑破容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对所有
<img>,<iframe>,<video>加全局规则：img, iframe, video { max-width: 100%; height: auto; } - Flex 容器里子项如果用了
flex: 0 0 auto（默认），又没限制min-width，小屏下文字换行或内容收缩就可能引发错位；显式写min-width: 0更安全 - Grid 布局中，避免用
fr单位搭配固定像素的gap——小屏时 gap 占比过大，容易挤掉内容；改用rem或clamp()控制 gap
真机表现和 DevTools 不一致？重点查 user-scalable 和 touch-action
DevTools 模拟不了手指双击缩放、长按菜单、3D Touch 这些行为，但更隐蔽的问题是：某些 CSS 属性会让真机触摸交互完全失灵，而模拟器里看不出异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用缩放的
user-scalable=no在 iOS Safari 上会导致 input 聚焦时页面乱跳，测试时先删掉这句再验证 - 给按钮或可点击区域加了
touch-action: none？小心——它会同时禁掉点击和滚动，真机上点不动，DevTools 里却能点 - 用
pointer-events: none覆盖层遮挡时，记得给下层元素加z-index，否则真机上穿透失效（尤其 Android WebView）
响应式验证最难的不是“看起来像”，而是“行为一致”。设备模拟器只管尺寸和像素比，不管触摸延迟、字体抗锯齿策略、甚至 Safari 对 vh 的动态修正——这些都得真机连着 Web Inspector 才能确认。
