底部固定悬浮条须用 position: fixed + bottom: 0 + left: 0 + right: 0 实现，禁用 sticky；需设 z-index、box-sizing: border-box，避免 height: 100vh；双按钮结构应语义化、扁平化，按钮用 button 元素，手机号用 type="tel"；点击区域需 min-height: 44px、足够 padding 和 touch-action: manipulation；ios 微信 webview 中 fixed 条软键盘收起后错位，需监听 blur 重置 bottom 或触发 scroll 重排。
底部固定悬浮条用 position: fixed 实现
核心是让容器脱离文档流并锚定视口底部，不是用 position: sticky（它依赖父容器滚动，无法真正“悬浮”）。必须设 bottom: 0 和 left: 0 + right: 0 拉满宽度，否则在部分安卓 WebView 或 iOS Safari 下会偏移或闪烁。
常见错误：
– 忘加 z-index，被轮播图、弹窗等遮盖；
– 用 height: 100vh 代替 fixed，导致页面滚动时条跟着动；
– 没设 box-sizing: border-box，内边距撑开高度后溢出。
双按钮留资栏的 HTML 结构要扁平且语义清晰
不要嵌套多层 div，按钮必须是 button 元素（非 a），否则无法正确触发生效（尤其微信内置浏览器对 a 的 click 事件有延迟或拦截）。表单字段如手机号输入框建议用 input[type="tel"]，触发软键盘数字模式。
推荐结构：
<footer class="fixed-lead-bar"><div class="bar-content">
<span class="bar-text">立即获取方案</span>
<input type="tel" placeholder="请输入手机号" class="bar-input"><button type="button" class="bar-btn bar-btn-primary">免费咨询</button>
<button type="button" class="bar-btn bar-btn-secondary">一键拨打</button>
</div>
</footer>
移动端点击区域和防误触必须手动增强
iOS Safari 和部分安卓浏览器默认点击热区只有 24px 高，按钮实际可点区域远小于视觉大小。不处理会导致用户连点 2–3 次才响应。
解决方法：
– 给按钮加 min-height: 44px（iOS 最小推荐点击尺寸）；
– 设置 padding 至少 12px 16px，别只靠 font-size 帽高；
– 加 touch-action: manipulation 减少 300ms 延迟；
– 避免在按钮上绑 ontouchstart，优先用 click 事件（现代浏览器已优化）。
兼容性坑：iOS 微信 WebView 中 fixed 条会上浮
这是经典 bug：iOS 微信里，当软键盘弹出后收起，fixed 元素位置错乱，常卡在页面中部。根本原因是 WebView 渲染层未重绘。
临时但有效解法：
– 监听 focus 和 blur 事件，在输入框失焦后强制重置 bottom 值（哪怕设成相同值）；
– 更稳妥的是加一段兜底脚本：document.body.scrollTop += 1; document.body.scrollTop -= 1; 触发重排；
– 不要用 transform: translateZ(0) 强制硬件加速——在旧版微信里反而加剧错位。
这个 bug 没有银弹，每次软键盘交互都得干预一次 DOM，别指望一次 CSS 能搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
