移动端底部操作栏必须用 position: fixed，因 position: sticky 在 iOS Safari 中对 bottom 支持不可靠；需配合 env(safe-area-inset-bottom)、viewport-fit=cover、硬件加速及 DOM 末尾放置等方案确保稳定贴底。
底部固定栏用 position: fixed 还是 position: sticky？
移动端底部操作栏必须用 position: fixed，position: sticky 在 iOS Safari 中对 bottom 的支持不可靠，尤其在页面滚动或键盘弹出时容易失效。固定定位能确保元素始终锚定在视口底部，但要注意它会脱离文档流，可能遮挡内容——所以主体内容需预留足够 padding-bottom 或 margin-bottom。
如何避开 iPhone 底部安全区（notch / home indicator）？
iOS 11+ 提供了 CSS 环境变量 env(safe-area-inset-bottom)，它返回底部安全区高度（通常为 34px）。直接写死 34px 不行：iPad、iPhone SE、带动态岛的机型数值都不同，且横屏时可能变为 0。
- 给底部栏加
padding-bottom: env(safe-area-inset-bottom)，让内容“撑开”到底部安全区之上 - 若底部栏本身需要贴底（如按钮组），用
height+padding-bottom组合，避免只靠bottom: 0被截断 - 务必加
viewportmeta 声明：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env()变量不生效
为什么 bottom: 0 在微信内置浏览器里有时失效？
微信 iOS 客户端（尤其是旧版）会强制将 fixed 元素渲染为“伪 fixed”，在页面快速滚动或键盘呼出后，bottom: 0 可能错位或跳动。解决方式不是换定位，而是加一层防御：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
transform: translateZ(0)或will-change: transform强制触发硬件加速，提升 fixed 渲染稳定性 - 监听
resize和focusin/focusout事件，键盘弹起时临时把底部栏z-index提高，并重置bottom值（部分安卓 WebView 也需此操作） - 避免在底部栏内放
input或textarea；如有表单需求，改用弹层 + 手动控制位置
结构上要不要用 <footer> 标签？
语义化上推荐用 <footer class="action-bar">，但注意：不能只依赖标签名实现固定效果，仍需 CSS 控制。重点在于 DOM 顺序——底部栏必须放在 <body> 最末尾，否则某些安卓 WebView 会因父容器 overflow: hidden 导致 fixed 元素被裁剪。
立即学习“前端免费学习笔记（深入）”；
另外，如果页面有「下拉刷新」逻辑（如基于 touchmove 自实现），要确保底部栏的 pointer-events: auto（默认即可），避免拦截底层 touch 事件；若用了第三方下拉库，检查其是否对 fixed 元素做了 transform 干预——这会导致安全区计算偏移。
