viewport标签是移动端响应式硬性开关，必须置于<head>最前且唯一，标准写法为<meta name="viewport" content="width=device-width, initial-scale=1">；漏写、错位、拼错或加user-scalable=no均导致980px桌面渲染、文字模糊、媒体查询失效。
没加 <meta name="viewport"> 标签，其他所有响应式手段都无效——它不是可选项，是移动端渲染的硬性开关。
必须放在 <head> 最前面的 viewport 标签
浏览器在解析 HTML 时，一旦遇到 <meta name="viewport"> 就立即应用缩放策略；如果它被 JS 注入、或写在 CSS 后面、或拼错成 name="viewpoint"，整个页面就会按桌面默认宽度（通常是 980px）渲染，导致手机上文字极小、需左右滑动才能看全。
- 标准写法只有一行，且必须紧贴
<head>开始：<meta name="viewport" content="width=device-width, initial-scale=1"> - 别加
user-scalable=no—— 它禁用双指缩放，违反 WCAG 可访问性要求 - 在 Vue/React 等项目中，检查
public/index.html是否被构建工具模板覆盖，实际未生效
@media 断点不能照搬 768px
断点不是设备分类，而是内容撑不开的临界像素值。写死 @media (max-width: 768px) 会让折叠屏（如 Galaxy Z Fold）、高 DPR 平板（如 iPad Pro）、小屏笔记本（如 12.5″ XPS）全部掉进同一套样式，结果要么留白太多，要么文字换行错乱。
- 用 Chrome DevTools 的 “Toggle device toolbar”，拖动宽度，观察导航栏文字何时开始换行、卡片何时重叠、按钮是否被截断
- 记下那个具体像素值（比如
624px），再写@media (max-width: 624px) - 避免嵌套媒体查询：
@media (min-width: 768px) { @media (orientation: landscape) { ... } }在部分 Android WebView 中不解析
图片和容器必须配对约束
<img> 是替换元素，默认不随父容器缩放。只设 width: 100% 会拉伸变形；只设 max-width: 100% 又可能在大屏下过小；更糟的是，如果父容器用了 display: flex，而子元素 flex-shrink: 0，max-width 直接失效。
立即学习“前端免费学习笔记（深入）”；
- 标准组合必须同时写：
img, video, iframe { max-width: 100%; height: auto; } -
height: auto不可省略，否则等比缩放失效 - SVG 需额外加属性：
preserveAspectRatio="xMidYMid meet"，否则可能被裁切
Flex/Grid 在老安卓 WebView 里会静默失败
Android 4.4 系统内置 WebView（基于 Chromium 30）对 flex-wrap、gap、grid-template-areas 支持极差，但控制台完全不报错，只会回退到块级流布局——结构看似正常，实则子元素堆叠错乱，调试时极易误判为 CSS 写错。
- 若需兼容 Android 4.4+，避免使用
gap，改用margin模拟；flex-wrap: wrap要配合显式width或flex-basis - Grid 布局建议降级方案：用
@supports (display: grid)包裹，外面补一层 float 或 flex 回退样式 - 测试时务必真机连接 Android 4.4 设备，模拟器或新版 Chrome DevTools 无法复现该问题
真正卡住人的从来不是“怎么写”，而是 viewport 漏了、断点抄错了、图片没加 height: auto、或者在老安卓上 Flex 突然不 wrap —— 这些地方一漏，整页响应式就形同虚设。
