viewport缺失或写错是移动端布局混乱的首要原因；必须写全并置于最顶部，禁用user-scalable=no，同时避免固定高度、脱离文档流和盒模型失控等行为。

移动端布局混乱，八成不是 CSS 写错了，而是浏览器压根没按你期望的宽度渲染——viewport 缺失或写错是第一根导火索；剩下问题多出在固定尺寸、脱离文档流、盒模型失控这三类行为上。

viewport 标签必须写全且放对位置

只加 是不够的。iOS Safari 会自动缩放，导致按钮挤成一团、文字小得看不清。

• 必须包含 initial-scale=1.0，否则首次加载就缩放，所有响应式断点失效
• 写在 最顶部，且只出现一次；重复或放在 后面会被忽略
• 避免写 user-scalable=no 或 maximum-scale=1.0，除非有强交互约束（如游戏画布），否则影响可访问性
• 推荐完整写法：

别用固定 height，改用 padding + min-height 控制视觉高度

写 height: 500px 在桌面看着整齐，到手机上直接导致区块重叠、页脚悬空、内容被截断——因为内容撑不开容器，后续元素失去定位基准。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 删掉所有非必要的 height 声明，尤其是 .section、.card、.footer 这类语义化容器
• 用 padding-top 和 padding-bottom 替代上下 margin，既保呼吸感又不破坏流式结构
• 若需最小可视高度（如首屏 Banner），用 min-height: 100vh，而非 height: 100vh（后者在 iOS Safari 中可能因地址栏隐藏/显示导致跳变）
• Flex 容器中慎用 align-items: center 配合固定高——父容器若没撑开，子元素会“悬空”

flex 布局要配对使用，避免混用 float / absolute

Flex 容器里写 float: left 或 position: absolute，等于主动放弃 Flex 的对齐能力。常见症状：按钮右移、图文错位、居中失效。

• 表单控件对齐用 display: flex; align-items: center; 包裹 + ，比调 vertical-align 更可靠
• 图文混排优先设 flex-direction: column（移动端竖排），再用媒体查询切回 row（≥768px）
• 删掉 position: absolute 配 top: 50%; transform: translateY(-50%) 的居中写法——安卓低版本 DPR 计算误差会导致像素级偏移
• 底部按钮别用 position: fixed，软键盘弹出会使其脱离视口锚点；改用 position: absolute + 滚动容器，中间内容加 overflow-y: scroll 和 -webkit-overflow-scrolling: touch

真机调试比模拟器更关键

Chrome DevTools 的设备模拟无法复现 Safari 的缩放策略、微信 WebView 的 UA 拦截、部分安卓厂商浏览器的私有渲染逻辑。很多错位问题只在真机上暴露。

• Android 真机：用 chrome://inspect 连接，查看实时盒模型和滚动状态
• iOS 真机：Mac 上 Safari → 开发菜单 → 设备名 → 检查网页，重点看 transform: scale() 是否意外触发独立图层
• 检查是否被 overflow-x: hidden 掩盖了真实溢出——它只是藏起滚动条，不解决右侧留白根源
• 用 box-sizing: border-box 和 margin: 0; padding: 0; 清除 body 默认边距，这是水平滚动条最常见的隐藏元凶

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！