index.html中的底部固定工具栏设计：HTML移动端布局规范-html教程-PHP中文网

移动端底部工具栏必须用 position: fixed; bottom: 0; left: 0; right: 0，设固定 height（如 56px），配合 padding-bottom: env(safe-area-inset-bottom) 和 viewport-fit=cover，并避免祖先元素含 transform，内容区用 padding-bottom 避让。

index.html中的底部固定工具栏设计：html移动端布局规范

移动端底部工具栏必须用 `position: fixed`，但光写 `bottom: 0` 不够

只加 bottom: 0 的 position: fixed 元素在 iOS Safari 和部分安卓 WebView 中会跳动、错位甚至消失——尤其在地址栏收放或键盘弹出时。这不是 bug，是浏览器对视口高度的动态重算导致的。

真正可用的定位三件套是：position: fixed; bottom: 0; left: 0; right: 0。缺一不可：漏掉 left: 0 或 right: 0，缩放或横屏时可能左右留白；只靠 width: 100% 在某些 UA 下会失效。

height 必须设为固定值（如 56px），禁用 100vh、100% 或 clamp() —— Safari 地址栏伸缩会触发视口高度突变，导致导航栏“抽搐”
必须给 body 加 padding-bottom，值 ≥ 工具栏高度，否则正文最后一段会被遮住
避免在该工具栏内部放置 <input> 或 <textarea></textarea>，iOS 键盘弹起后容易触发布局重排，造成整体偏移

安全区适配必须显式处理 `env(safe-area-inset-bottom)`

iPhone X 及后续机型有圆角和 Home Indicator，单纯 bottom: 0 会让工具栏内容被裁切或压在指示器上。不加适配，用户点不到最底下一排图标。

正确做法是在工具栏容器上加：padding-bottom: env(safe-area-inset-bottom)。这个 CSS 环境变量由系统注入，值在刘海屏设备上非零，在普通屏上为 0，无需 JS 判断。

OpenAI Codex Sub Agents

一款AI工具，主要用于使用 OpenAI Codex CLI 处理编码任务。触发词：codex、code review、fix CI、refactor code、implement feature、coding agent、gpt-5-codex。Clawdbot 可将编码工作委托给 Codex CLI 作为子代理或直接工具，适合需要提升相关任务效率的用户。

下载

必须配合 <meta name="viewport" content="..., viewport-fit=cover">，否则 env() 不生效
不要用 calc(56px + env(safe-area-inset-bottom)) 去覆盖 height —— 高度仍要保持固定，padding 是额外留白
若工具栏含文字按钮，建议用 text-align: center + flex: 1 布局，避免因 padding-bottom 导致文字偏上

别把工具栏塞进带 `transform` 的父容器里

如果工具栏外层 DOM 被套了 transform: scale(1)、rotate(0) 或任何 transform 值，position: fixed 会退化为相对该父元素定位，而不是视口。这是 iOS 和 Chrome Mobile 的明确行为，不是兼容性问题，是规范定义。

常见踩坑场景：页面用了全局缩放适配（如 rem 方案中对 html 设 transform: scale()），或某个动画库自动加了 transform 类名。

检查工具栏的任意祖先节点是否含 transform、perspective、filter 或 will-change，只要有一个，fixed 就失效
解决方案只有两个：把工具栏提到 body 直接子级；或移除祖先的 transform（改用 zoom 或媒体查询适配）
微信内置 WebView 对此更敏感，哪怕 transform: translateZ(0) 也会触发

正文区域不能只靠 `margin-bottom` 避让，必须用 `padding-bottom`

很多人给 main 或内容容器加 margin-bottom: 56px，以为能空出空间。但 margin 无法阻止 fixed 元素覆盖，且在 flex/grid 容器中 margin 可能被折叠或忽略。

唯一可靠方式是：给内容区域本身加 padding-bottom，并确保其 box-sizing 为 border-box（现代 reset 通常已设）。

如果工具栏高度动态变化（比如夜间模式下变高），硬编码 padding-bottom 会失效 —— 此时应改用 CSS 自定义属性 + padding-bottom: var(--toolbar-height, 56px)，再用 JS 更新变量
不要对 body 同时设 padding-bottom 和对 main 设 padding-bottom，会造成双倍留白
若用 Vue/React，组件重渲染可能触发 layout thrashing，导致 padding 计算延迟 —— 建议在 mounted/useEffect 中用 getComputedStyle 读取真实高度再设