html中加不遮挡内容的app下载横幅，用position:fixed+bottom:0的div浮层置于前，配safe-area-inset-bottom、opacity隐藏、≤60px高度；唤起需用户点击触发myapp://或intent://链接，并用超时回退判断是否已安装。
HTML里怎么加一个不遮挡内容的APP下载横幅
直接用 <div> 浮层 + 定位是最轻量、兼容性最好的方式，不需要框架或 JS 也能生效，但得手动控制显示逻辑。
<ul>
<li>放在 <code> 最底部（ 前），避免被其他 z-index 覆盖
position: fixed + bottom: 0 确保始终贴底，iOS Safari 会自动避开「安全区域」，但 Android 需补 padding-bottom: env(safe-area-inset-bottom)
display: none 初始隐藏——它会破坏无障碍读取；改用 opacity: 0; pointer-events: none，JS 控制显隐更稳妥点击「打开APP」按钮没反应？检查这三处
常见问题不是代码写错，而是系统层面拦截或协议未注册。
- 确保唤起链接是
myapp://或intent://（Android）格式，https://链接不会触发 APP 打开 - iOS 上必须提前在
Associated Domains配置好applinks:yourdomain.com，否则 Safari 会静默失败，连错误都不报 - Android 的
intent://需带package=和scheme=，漏掉任意一项都会跳应用市场而不是打开 APP；可加fallback=指向下载页兜底
如何判断用户已经装了APP，只对未安装者展示下载提示
纯前端无法 100% 准确检测，但可以用「超时+跳转回退」模拟判断，这是目前最可行的折中方案。
- 给按钮绑定
onclick：先尝试唤起myapp://home，同时启动一个setTimeout（建议 2500ms） - 如果唤起成功，页面会离开当前上下文，定时器不会执行；如果超时，说明唤起失败 → 很可能是未安装，此时跳转到下载页
- 注意：部分安卓浏览器（如华为浏览器）会禁用定时器在唤起期间的执行，需额外监听
pagehide事件辅助判断 - 别依赖
navigator.userAgent识别设备型号来决定是否展示——用户可能用 iPad 访问，但装的是 iPhone 版 APP
为什么 iOS 上横幅点一次就消失，再刷新也不见了
因为 Safari 默认阻止了「非用户手势触发的弹窗/唤起」，而很多实现用了 window.location.href = 'myapp://' 这种同步跳转，在页面加载完成前就被拦截了。
立即学习“前端免费学习笔记（深入）”；
- 所有唤起逻辑必须绑定在用户真实点击（
click、touchend）事件里，不能在DOMContentLoaded或setTimeout中自动触发 - 横幅的显示本身可以靠 JS 判断
localStorage或cookie控制频次，但「唤起动作」那一瞬间，必须是用户手指落下的结果 - 如果用了 PWA，记得检查
manifest.json里的display字段是否为standalone——设成minimal-ui或browser会导致唤起行为受限
真正难的不是写几行 HTML，而是让唤起在各种浏览器、系统版本、安装状态组合下都“看起来像没出过问题”。多数失败发生在边界场景：微信内置浏览器禁用自定义协议、iOS 17.4 后限制第三方商店 APP 唤起、某些国产浏览器把 intent 链接当成钓鱼链接拦截……这些没法靠一套代码解决，得结合埋点和客户端日志来回溯。
