viewport标签失效会导致所有响应式失效，必须确保<meta name="viewport" content="width=device-width, initial-scale=1">唯一且置于<head>最顶部，禁用user-scalable=no，避免拼写错误或写死像素值。
viewport meta 标签没生效，所有响应式都白搭
Chrome、Firefox、Safari 甚至 Edge 都会忽略错误的 <meta name="viewport"> —— 它不是可选配置，而是移动端渲染的开关。常见失效原因包括：name="viewpoint" 拼错、content="width=1200" 写死像素值、或标签被 Vue/React 的模板系统覆盖（比如 public/index.html 里写了，但构建后没进最终 HTML）。必须确保它出现在 <head> 最靠前位置，且只有一行：</meta name="viewport" content="width=device-width, initial-scale=1">。加了 user-scalable=no 要小心：它禁用双指缩放，对视力障碍用户不友好，多数场景不该加。
Chrome DevTools 模拟不准，真机访问才可靠
DevTools 的设备模拟能快速验证断点和 Flex/Grid 行为，但它无法还原真实触摸延迟、DPR（设备像素比）差异、横竖屏切换动画、以及 iOS Safari 对 vh 单位的特殊处理（比如地址栏收起时高度突变）。建议用本地服务器（如 python3 -m http.server 8000）配局域网 IP，在 iPhone/iPad 上直接访问 http://192.168.x.x:8000。重点观察三件事：按钮点击区域是否够大（至少 44×44px）、表单输入框聚焦后页面是否意外缩放、导航菜单展开后能否顺畅滚动。
@media 断点写成 768px / 992px 是懒人陷阱
这些数字不是设备分界线，而是你内容撑开的临界点。比如一个带图标+文字的导航项，在 Chrome DevTools 里拖动宽度，发现它在 632px 时开始换行、文字被截断，那你的断点就该是 @media (max-width: 632px)，而不是硬套 768px。另外注意：max-device-width 已废弃，一律用 max-width（查的是视口宽度，不是物理屏幕）；嵌套媒体查询如 @media (min-width: 768px) { @media (orientation: landscape) { } } 在部分旧版 Safari 中不解析，要写成 @media (min-width: 768px) and (orientation: landscape)。
图片溢出、字体糊、Flex 子项错位，八成是盒模型没统一
响应式崩坏常源于基础 CSS 没归一：img 必须设 max-width: 100% 和 height: auto，否则小屏上直接撑破容器；字体别用固定 px，优先用 rem（配合根字体动态调整）或 clamp(1rem, 4vw, 1.5rem)；所有容器级元素（<section>、<article> 等）加上 display: block，避免老浏览器不识别 HTML5 标签；最关键的是全局加 * { box-sizing: border-box; }，否则 padding 和 border 会额外增加宽度，让百分比布局在 Safari 或 Firefox 中算不准。
立即学习“前端免费学习笔记（深入）”；
