viewport标签是响应式布局的硬性开关，缺失或错误（如name="viewpoint"、width=1200、user-scalable=no）会导致@media不触发，文字过小、滑动查看、点击错位；正确写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">，须置于<head>最前且仅一次。
没加 <meta name="viewport">，所有响应式组件都白搭——它不是可选项，是媒体查询生效的硬性开关。
viewport 标签写错或缺失，@media 就不会触发
手机上文字小得看不清、左右滑动才能看完、按钮点击错位……八成是这个标签没写，或写成了 name="viewpoint"、content="width=1200"、user-scalable=no 这类错误形式。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>最前面，且只写一次 - Vue/React 项目里，检查
public/index.html是否被构建脚本覆盖，实际未生效 - iOS Safari 下加
maximum-scale=1.0会禁用双击放大，损害可访问性，别加
断点不是设备尺寸，而是内容自然断裂点
别抄 “768px 适配 iPad” 这种说法。@media (max-width: 768px) 只表示“视口 ≤ 768px 时应用”，但真实布局崩溃点可能在 623px（卡片开始换行）、685px（导航文字挤成两行）。
- 用 Chrome DevTools 的响应式模式拖动宽度滑块，实时观察文字折行、图片溢出、按钮截断的位置
- 记下那个像素值（如
624px），再写@media (max-width: 624px)，比套用通用值更可靠 - 避免混用
max-width和min-width断点（比如同时写(max-width: 767px)和(min-width: 768px)），缩放 110% 时可能留白失效
Flex/Grid 容器内，max-width: 100% 可能被 flex-shrink: 0 拦住
图片、视频、iframe 在 Flex 容器里不缩放？常见原因是父容器设了 display: flex，而子元素默认 flex-shrink: 1，但若显式设了 flex-shrink: 0 或 flex: none，max-width: 100% 就失效了。
立即学习“前端免费学习笔记（深入）”；
- 标准响应式图片规则必须带
height: auto：img, video, iframe { max-width: 100%; height: auto; } - SVG 需额外加
preserveAspectRatio="xMidYMid meet"，否则可能被裁切 - 老安卓 WebView 对 Flex/Grid 支持差，部分样式会静默失败，上线前务必真机测试
最常被忽略的不是怎么写断点，而是 viewport 标签是否真正在最终 HTML 中生效——尤其在 SSR 或构建工具介入后，它很容易被覆盖或遗漏。
