viewport meta 标签必须完整写为 并置于 最顶部，否则手机浏览器按980px渲染致媒体查询失效、布局错位；断点推荐 min-width: 768px 和 1024px，禁用 max-device-width；css 优先用 rem/%/vw，禁用 float，确保点击区域≥44×44px，兼容老安卓需规避 gap/flex:1 缩写。
不加 <meta name="viewport">，手机浏览器就按 980px 虚拟视口渲染，所有媒体查询失效，再精细的 CSS 也白搭。
viewport meta 标签必须写对且放最前
这是响应式启动开关，不是“可选优化”。错一个字符或位置靠后，页面在真机上就会文字极小、横向滚动、布局错位。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须完整，不能省initial-scale=1.0，否则 iOS Safari 可能自动缩放 - 禁止写成
width=375或width=414这类固定值——它会锁死视口，断点失效 - 必须放在
最顶部，早于任何 CSS 或 JS，避免闪屏或重排 - 别加
user-scalable=no、maximum-scale等参数，除非是 Kiosk 场景；普通网页禁用缩放会直接被 App Store 拒审
媒体查询断点别硬套 320px/480px
现代设备宽高比、DPR、折叠状态差异大，只盯“手机像素”会漏掉 iPad mini 横屏、Fold 展开态、甚至 Chromebook 触屏模式。
- 推荐主断点设为
@media (min-width: 768px)（平板竖屏临界），次断点@media (min-width: 1024px)（桌面窄屏起始） - 避免用
max-device-width——已废弃，查的是物理设备宽度，不是当前视口；一律用max-width或min-width - 横屏敏感场景（如视频页）可加
@media (orientation: landscape)辅助判断，但别单独依赖它做核心布局 - 测试时真机打开 Chrome DevTools 的 “Toggle device toolbar”，选 “iPhone SE” 和 “iPad Pro (landscape)” 交叉验证，模拟器不能代替真机触控反馈
CSS 单位和布局方式直接影响适配稳定性
用错单位或布局模型，会导致小屏溢出、字体炸裂、点击失灵，而且错误常静默发生，控制台不报错。
- 禁用
float做多列——它在移动端无清除上下文，必然塌陷；改用display: flex或display: grid - 优先用
rem、%、vw，少用固定px；例如padding: 1rem比padding: 20px更适应小屏空间压缩 - 卡片/按钮等可点击区域，iOS 要求 ≥44×44px，安卓 ≥48×48px；别只给内部
<button></button>加padding，整个容器（如<div class="card">）也得有足够内边距 <li>老安卓 WebView（如 Android 4.4 系统自带）不支持 <code>gap、flex: 1缩写、aspect-ratio；若需兼容，用margin替代gap，显式写flex: 1 1 auto
最容易被忽略的是：viewport 标签写了但没生效，往往是因为它被其他脚本动态删了，或者被 CMS 模板二次覆盖。上线前用真机访问，右键「查看网页源代码」，确认那一行是否真实存在且未被篡改。
