用 position: fixed 实现底部悬浮按钮最稳妥，需设 bottom: calc(20px + env(safe-area-inset-bottom)) 适配 ios 安全区，left: 50% + margin-left 居中，z-index ≥ 1000 防遮挡，并滚动节流后显示。
用 position: fixed 实现底部悬浮按钮
直接加 position: fixed 是最稳妥的做法，浏览器兼容性好（IE10+），不依赖 Flex 或 Grid 布局，也不受父容器定位影响。关键不是“固定”，而是“固定在视口底部 + 水平居中 + 留出安全边距”。
常见错误是写成 bottom: 0; left: 0; 导致按钮贴底左对齐，或者忘了加 z-index 被其他内容遮挡。
-
bottom: 20px比0更合理——避免被 iOS Safari 底部导航栏或安卓虚拟按键遮住 - 水平居中别用
left: 50%; transform: translateX(-50%)，改用left: 50%; margin-left: -60px（假设按钮宽 120px），更稳定，避免 transform 触发重排 - 必须设
z-index: 1000以上，尤其页面用了 Modal、Drawer 等组件时，否则客服按钮可能被盖住
按钮点击后跳转企业微信或唤起客服 App
纯 HTML 按钮无法直接调起微信客服，得靠链接协议。企业微信支持 https://work.weixin.qq.com/kfid/xxx，微信个人号不支持外链唤起，只能跳小程序或二维码页。
容易踩的坑是把链接写成 weixin:// 协议——它只在微信内置浏览器生效，Chrome、Safari 打开会失败，且 iOS 上还会被拦截。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 优先用企业微信官方外链：
https://work.weixin.qq.com/kfid/xxxxx（后台「客户联系」→「快速联系」生成） - 若用个人微信，改用跳转至带客服二维码的轻量页，或嵌入微信小商店客服组件
- 加
target="_blank"和rel="noopener"，防止新开页拿到window.opener权限
移动端适配：避免 iOS Safari 底部栏遮挡
iOS Safari 的「智能横幅」和底部工具栏会动态覆盖视口，fixed 元素可能被压住。不能只靠 bottom: 20px 一劳永逸。
真正有效的办法是监听 resize，检测 window.innerHeight 变化，再动态调整 bottom 值——但太重。更轻量的是用 CSS 的 env(safe-area-inset-bottom)。
- 给按钮加样式：
bottom: calc(20px + env(safe-area-inset-bottom)); - 注意
env()在旧版 Safari 需要 fallback，比如先写bottom: 20px;再覆盖 - 测试时真机连 Mac 用 Web Inspector 查看 computed bottom 值是否被正确计算
隐藏逻辑：用户滚动一定距离后才显示按钮
全屏常显会干扰阅读，尤其首屏有 CTA 时。常见做法是滚动超过 300px 再出现，但判断时机和性能要注意。
别在 scroll 事件里直接操作 DOM，容易卡顿。要用节流或 IntersectionObserver 监听视口位置，但后者对简单场景有点杀鸡用牛刀。
- 推荐用
requestAnimationFrame节流：scroll中只记下lastScrollY，在 rAF 回调里判断并 toggle 类名 - CSS 控制显隐比 JS 改
display更高效，用.floating-btn.hidden { opacity: 0; pointer-events: none; } - 首次进入页面时默认隐藏，等用户动一下再显示，避免“刚打开就弹按钮”的干扰感
z-index 不够高，或者父容器用了 transform 创建了新层叠上下文，把按钮压到了底层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
