必须在body上设padding-bottom，否则内容会被fixed底部栏遮挡；值应≥其渲染高度（如56px），并加env(safe-area-inset-bottom)适配iphone安全区，且需配合position:fixed、bottom:0、left:0 right:0三件套。
body padding-bottom 必须设，否则内容一定被盖
“吸底”不是让悬浮条自己贴住底部就完事，而是让页面内容主动避开它。position: fixed; bottom: 0 只控制悬浮条位置，不占文档流空间，所以正文最后一行会从视口最底端开始渲染，刚好钻进悬浮条下面。
正确做法是直接在 body 上加内边距：
-
body { padding-bottom: 56px; }—— 高度必须 ≥ 悬浮条渲染高度（别用100vh或百分比，Safari 地址栏收放时会跳） - 兼容 iPhone 底部安全区：
padding-bottom: calc(56px + env(safe-area-inset-bottom)); - 低版本 Safari（15.4 前）不支持
calc()里混用env()，可写两行，后一条覆盖前一条
fixed 三件套缺一不可，漏了就错位
只写 bottom: 0 是常见错误。iOS Safari、微信 WebView 等环境对层叠上下文敏感，任意缺失都会导致横屏、缩放或小屏下右侧留白、高度塌陷、甚至完全消失。
悬浮条自身样式必须同时包含：
-
position: fixed—— 不可用absolute或sticky替代 -
bottom: 0—— 锚定视口底部，不是父容器 -
left: 0; right: 0—— 确保水平铺满，避免滚动条出现时右侧被截
额外建议：height: 56px（固定值），z-index: 1000（够用即可，别堆到 99999）
别用 sticky 模拟底部吸底，它根本不支持
position: sticky; bottom: 0 在绝大多数浏览器中被忽略。Chrome 有实验性支持，但要求父容器可滚动且高度超出视口——这和“全局悬浮”需求冲突。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
更关键的是：sticky 本质是 relative 和 fixed 的中间态，只响应滚动到达某临界点，无法实现“始终贴底”。强行用它，结果往往是：页面一加载就看不见、滚动一段才突然出现、或在短内容页完全不触发。
真正需要“沉底页脚”（随内容自然落位）时，该用 Flexbox：body { display: flex; flex-direction: column; min-height: 100vh; } + main { flex: 1; }。但这和“悬浮条”是两回事。
键盘弹出、地址栏缩放时，fixed 会偏移，得靠 JS 补偿
iOS Safari 软键盘弹出或地址栏隐藏时，visualViewport.height 改变，fixed 元素常卡在错误位置（比如悬在半空）。这不是 bug，是浏览器 viewport 缩放行为导致的。
不能靠阻止缩放或禁用键盘来解决，而应监听并修正：
- 监听
visualViewport?.resize（iOS 15+）或window.resize（降级） - 读取当前可视高度：
const vh = window.visualViewport?.height || window.innerHeight - 动态设置悬浮条
bottom值：bar.style.bottom = `${window.innerHeight - vh}px` - 同时结合
safe-area-inset-bottom，避免 Home Indicator 遮挡
这个补偿逻辑容易被忽略，但恰恰是真机测试时“为什么有时正常、有时飘走”的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
