固定下载条需设padding-bottom≥横幅高度并适配safe-area-inset-bottom，唤起必须绑定真实用户click事件且协议配置完整，否则iOS静默拦截、Android跳应用市场。
直接用 position: fixed + bottom: 0 就能做，但不加 padding-bottom 和安全区适配，90% 的用户会看不到按钮或点不动。
为什么固定下载条一刷新就消失或点无效
不是 JS 写错了，而是 Safari 和部分安卓 WebView 对唤起行为做了严格限制：
- 唤起必须绑定在真实用户点击（
click或touchend），不能在DOMContentLoaded、setTimeout或页面加载完成前触发 - iOS Safari 会静默拦截非手势触发的跳转，控制台不报错，也不弹提示
- 华为、小米等定制浏览器可能禁用唤起期间的定时器，导致“超时跳下载页”逻辑失效
底部横幅高度和 body padding 怎么设才不遮内容
关键不是“看起来没遮”，而是确保小屏、折叠屏、带刘海/圆角的设备上文字可读、按钮可点：
- 横幅高度建议固定为
56px或60px，不用100vh或百分比——Safari 地址栏收放时会跳变 -
body必须加padding-bottom: 60px（值 ≥ 横幅高度），否则正文最后一段永远被盖住 - Android 需补
padding-bottom: env(safe-area-inset-bottom)，否则横幅被底部圆角切掉 - iOS 不需要额外 padding，系统自动识别安全区，但必须用
env(safe-area-inset-bottom)做 fallback
唤起协议怎么写才不被系统拦截
协议本身没问题，问题出在注册、封装和触发时机：
立即学习“前端免费学习笔记（深入）”；
- iOS：
myapp://home要生效，必须在 Xcode 中配置Associated Domains，填applinks:yourdomain.com，否则 Safari 直接忽略 - Android：
intent://home#Intent;scheme=myapp;package=com.your.app;S.browser_fallback_url=https%3A%2F%2Fyourdomain.com%2Fdownload;end，漏掉package=或browser_fallback_url=就会跳应用市场而非打开 APP - 所有唤起动作必须包裹在
addEventListener('click', () => {...})里，且不能是委托事件（比如绑在document上再判断 target）——部分 WebView 只认直接绑定在按钮上的原生 click
怎么让横幅只出现一次又不破坏可访问性
别用 display: none 初始隐藏——屏幕阅读器会跳过，视障用户根本不知道有下载入口：
- 初始状态用
opacity: 0; pointer-events: none，JS 控制显隐更稳妥 - 展示频次靠
localStorage控制，比如存lastShow: Date.now()，24 小时内不再显示 - 关闭按钮要支持键盘
Esc和外部点击收起，否则 WCAG 2.1 AA 级不达标 - 横幅必须有明确的
role="banner"和aria-label="立即下载APP，开启更快服务"
真正难的不是定位，而是让唤起在 iOS 17+、鸿蒙 NEXT、微信内置浏览器、QQ 浏览器这些环境里都走通——每个系统对「用户手势」的定义略有差异，测试时得真机连着 Safari Web Inspector 和 Chrome DevTools 同时看 network 和 console。
