viewport标签缺失或错误是响应式失效的首要原因，必须写为并置于head顶部；需检查线上HTML源码确认存在，且注意老iOS对vw/rem的支持限制。
viewport 标签没写对，模板再好也白搭
所有响应式模板失效的第一原因，就是 <meta name="viewport"> 缺失或拼错。常见错误包括：name="viewpoint"（少个 e）、content="width=1200"（硬编码像素）、user-scalable=no（禁用缩放）。正确写法只有一行，且必须放在 最顶部：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Vue/React 项目中尤其要注意：构建后生成的 index.html 可能被脚本覆盖，实际线上 HTML 里这行可能根本不存在。打开浏览器「查看网页源代码」确认它真实存在，而不是只在源码里写了就以为生效。
Flex/Grid 容器里图片不缩放？检查 flex-shrink
用模板时常见现象：小屏下图片撑破容器、横向滚动、文字被挤出视口。问题往往不在媒体查询，而在 Flex 容器内子元素默认行为被覆盖。例如：
-
img设了max-width: 100%; height: auto;，但父容器是display: flex，且子元素显式设了flex-shrink: 0或flex: none→ 缩放被拦截 - SVG 没加
preserveAspectRatio="xMidYMid meet"→ 被拉伸或裁切 - 旧版安卓 WebView（如 Android 4.4）对
flex-wrap和gap支持差，样式静默失效
解决办法：统一给响应式媒体对象加基础规则：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
img, video, iframe, svg { max-width: 100%; height: auto; }<br>svg { preserveAspectRatio: xMidYMid meet; }
断点别抄“768px 适配 iPad”，按内容断裂点设
模板里常见的 @media (max-width: 768px) 很容易误导人。真实布局崩溃点不是设备型号，而是内容自然换行的位置——比如导航文字在 685px 开始折成两行、卡片在 623px 开始换列、按钮图标被截断在 592px。
操作建议：
- 在 Chrome DevTools 响应式模式下拖动宽度滑块，眼睛盯住文字、图片、按钮的临界变化点
- 记下那个像素值（如
624px），直接写@media (max-width: 624px) - 避免混用
max-width和min-width断点（比如同时写(max-width: 767px)和(min-width: 768px)），用户缩放 110% 时可能留白失效
模板里的 rem/em 单位在 iOS Safari 10 以下会失效
很多响应式模板用 vw 或 JS 动态算 rem 根字体，但在 iOS Safari 10 及更早版本中，vw 不能用于 font-size，会导致文字忽大忽小甚至消失。
稳妥做法：
- 用
rem时，提供 CSS fallback：font-size: 16px; font-size: 1rem; - 若必须用
vw，加 JS 兜底（仅针对老 iOS）：
if (/iP(hone|ad)/.test(navigator.userAgent) && parseInt(navigator.appVersion) <= 10) {<br> document.documentElement.style.fontSize = innerWidth / 25 + 'px';<br>}
真正容易被忽略的，不是怎么选断点或怎么写 media query，而是 viewport 是否真正在最终 HTML 中生效、以及老设备对现代单位的支持边界——这些点不验证，模板只是纸面漂亮。
