如何解决iOS Safari中smartbanner.js横幅与默认应用内横幅同时显示的问题

我来给你梳理几个可行的解决方案，帮你搞定iOS上两个横幅打架的问题：

方案一：让iOS用系统原生横幅，其他设备用smartbanner.js #

这是最稳妥也最符合iOS用户使用习惯的做法——既然iOS已经自带了适配Universal Links的原生横幅，咱们就让它负责iOS端的展示，把smartbanner.js的范围限定在非iOS设备上。

你只需要在初始化smartbanner.js之前加个设备判断就行，代码示例如下：

// 检测当前设备是否为iOS
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

// 仅在非iOS设备上初始化smartbanner.js
if (!isIOS) {
  new SmartBanner({
    appStoreId: '你的App Store应用ID',
    // 其他smartbanner配置项...
  });
}

这样一来，iOS用户只会看到系统原生的横幅，安卓等其他设备则正常显示smartbanner.js的横幅，完美避免重叠。

方案二：禁用iOS的系统原生横幅（适合更偏好smartbanner样式的场景） #

如果你更想统一用smartbanner.js的样式，那可以想办法让iOS不显示原生横幅。这里有个小技巧：给页面添加一个带无效App ID的apple-itunes-app meta标签，让Safari无法识别到对应的应用，自然就不会弹出原生横幅了。

代码示例：

<meta name="apple-itunes-app" content="app-id=invalid">

不过要注意，这个方法依赖Safari的现有逻辑，后续苹果如果调整规则可能会失效，所以优先推荐方案一。

方案三：尝试检测系统横幅状态（不推荐） #

如果你非要同时保留两者，想通过检测系统横幅是否显示来控制smartbanner.js的显示状态，这个思路其实不太靠谱——因为iOS的原生横幅属于浏览器层面的元素，不在页面DOM树里，很难通过JS准确检测它的显示状态，所以不建议折腾这个方向。

总结下来，方案一是最省心也最符合平台规范的选择，推荐优先尝试~

备注：内容来源于stack exchange，提问作者Bessonniy