position: fixed 是实现底部固定悬浮条的唯一可靠方案，需设 bottom: 0、left: 0 和 width: 100%，并注意 z-index、box-sizing、transform 影响及 tel: 协议兼容性。
底部固定悬浮条用 position: fixed 实现
要让拨号条始终贴在屏幕最下方，position: fixed 是唯一可靠方案。绝对定位（position: absolute）会随滚动消失，而 fixed 相对于视口定位，滚动时也不移位。
关键点：必须设置 bottom: 0 和 left: 0（或 right: 0），同时指定 width: 100% —— 否则在部分 Android 浏览器里会窄于屏幕，尤其横屏后。
容易踩的坑：
-
z-index值太低，被其他弹层（如 modal、toast）盖住，建议设为9999或更高 - 没加
box-sizing: border-box，导致 padding 或 border 让实际宽度超 100%，出现横向滚动条 - 父容器有
transform（比如某些 Vue/React 动画组件），会“截断”fixed的定位上下文，强制回退成 relative 定位
一键拨号必须用 tel: 协议，且 href 不能为空
HTML 中触发系统拨号界面，只认 tel: 协议链接。写成 <a href="tel:13800138000">拨号</a> 才有效；如果 href 是 #、javascript:void(0) 或空字符串，点击后什么都不会发生。
立即学习“前端免费学习笔记（深入）”；
注意兼容性细节：
- iOS Safari 对号码格式敏感：含空格、短横线、括号可能被忽略，建议清洗为纯数字（如
13800138000） - Android 部分定制 ROM（如华为 EMUI）会拦截非标准
tel:写法，例如tel:+8613800138000可能失败，优先用无前缀纯数字 - 不要在
onclick里调window.location.href = 'tel:...'—— iOS 15+ 和部分安卓 WebView 会静默拒绝，必须是用户真实点击的<a>标签
悬浮条内容需兼顾可点击区域与防误触
移动端手指操作精度有限，height 小于 48px 的按钮很难稳定点击，iOS 人机接口指南明确建议最小点击区域为 44×44pt。所以整个悬浮条高度至少设为 56px，内部按钮文字用 line-height 居中，别依赖 padding 撑高。
实操建议：
- 给
<a>加display: block和足够内边距（如padding: 12px 16px），确保点击热区覆盖全宽 - 避免在悬浮条里放多个操作（如“拨号”+“微信”），双操作易误点；真需要多入口，用下拉菜单或长按触发，别平铺
- 若页面本身有底部导航栏（tabbar），悬浮条需预留其高度，否则会被遮挡 —— 常见做法是用
padding-bottom抬高内容区，再让悬浮条bottom: 0
微信内置浏览器要额外加 click 事件兜底
微信 iOS 客户端的 X5 内核对 tel: 支持不稳定，有时点击无响应。这不是 bug，是微信主动限制了部分协议跳转。此时需监听 click 事件，在 300ms 内补发一次跳转。
示例代码逻辑：
<a id="call-btn" href="tel:13800138000">立即拨打</a>
<script>
const btn = document.getElementById('call-btn');
btn.addEventListener('click', function(e) {
// 微信环境检测（简单版）
if (/MicroMessenger/i.test(navigator.userAgent)) {
setTimeout(() => {
window.location.href = this.href;
}, 100);
}
});
</script>
注意：setTimeout 时间不宜超过 300ms，否则 iOS 会判定为非用户直接触发，拒绝跳转；也不能在 touchstart 就触发，必须等 click 事件，否则安卓上可能连点两次。
真正难处理的是那些禁用了拨号权限的设备（比如企业管控机、儿童模式），这时候没有任何前端手段能绕过 —— 能做的只有提前展示提示文案，而不是静默失败。
