viewport缺失或写错是移动端布局混乱的首要原因；必须写全并置于最顶部，禁用user-scalable=no，同时避免固定高度、脱离文档流和盒模型失控等行为。
移动端布局混乱，八成不是 CSS 写错了，而是浏览器压根没按你期望的宽度渲染——viewport 缺失或写错是第一根导火索；剩下问题多出在固定尺寸、脱离文档流、盒模型失控这三类行为上。
viewport 标签必须写全且放对位置
只加 <meta name="viewport" content="width=device-width"> 是不够的。iOS Safari 会自动缩放，导致按钮挤成一团、文字小得看不清。
- 必须包含
initial-scale=1.0，否则首次加载就缩放，所有响应式断点失效 - 写在
最顶部，且只出现一次；重复或放在后面会被忽略 - 避免写
user-scalable=no或maximum-scale=1.0，除非有强交互约束（如游戏画布），否则影响可访问性 - 推荐完整写法：
<meta name="viewport" content="width=device-width, initial-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;包裹<label></label>+<input>，比调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默认边距，这是水平滚动条最常见的隐藏元凶
