viewport标签缺失或错误是自适应失效的起点，必须置于head顶部且格式正确；导航栏应使用flex布局配合响应式断点、相对单位和动态字体适配。
viewport 标签没加或写错，导航栏根本不会自适应
所有自适应失效的起点，几乎都是这行缺失或拼错：<meta name="viewport" content="width=device-width, initial-scale=1.0">。它必须放在 最顶部，早于任何 CSS 和 JS。写成 device_width、width=deviceWidth 或漏掉 initial-scale=1.0，iOS Safari 就会按 980px 宽度渲染，导航栏直接缩成小地图，用户得双指放大才能点。
导航容器用 display: flex，但别硬塞固定 padding
常见错误是给每个 <li> 写死 padding-left: 70px; padding-right: 70px; —— 窗口一窄，这些像素不缩，菜单立刻溢出、触发横向滚动条。正确做法是让容器弹性接管：
-
nav ul设display: flex; flex-wrap: wrap;，允许换行 - 用
gap: 1rem;控制项间距，比margin更干净 -
nav li设flex: 1 1 auto;，内容决定基础宽度，空间不足时自动压缩 -
nav a的内边距改用相对单位，比如padding: 0.75rem 1.25rem;
小屏切换靠 @media (max-width: 768px)，不是设备判断
断点只看视口宽度，不猜“是不是 iPhone”。768px 是通用临界值，覆盖大部分平板横屏和手机竖屏。在这个断点里要做的事很明确：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
nav ul改为flex-direction: column;，垂直堆叠 - 隐藏原生菜单项：
nav ul:not(.active) { max-height: 0; overflow: hidden; } - 显示汉堡按钮：
.menu-toggle { display: block; }，并绑定 click 切换.active类 - 避免用
float或inline-block，它们在 flex 容器里行为不可控
字体和图标在小屏上容易被忽略的缩放问题
用 vw 做字体单位（如 font-size: 4.266667vw;）在 iOS Safari 10 以下不生效，会导致文字突然变极小。稳妥方案是 fallback 到 JS 动态设置根字体：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';
另外，图标如果用 background-image，记得加 background-size: contain; 或 cover;，否则在高 DPR 屏幕上会模糊；SVG 图标优先用内联写法，避免加载失败导致空白。
