iOS App Store Smart Banner是Safari原生支持的顶部下载横幅，需通过HTTPS页面中<meta name="apple-itunes-app">标签声明app-id等参数，仅在iOS Safari生效，Chrome等浏览器及HTTP环境均不显示。
什么是iOS App Store Smart Banner
苹果在 Safari 中支持一种原生的下载提示横幅，叫 Smart Banner，它不是靠 JavaScript 模拟的弹窗，而是由系统自动识别 <meta> 标签后原生渲染的顶部横幅，只对 iOS 设备生效，且仅在 Safari 浏览器中显示（Chrome、Firefox 等不支持）。
关键点：必须用 <meta name="apple-itunes-app">，其他写法（比如拼错 name 或用自定义属性）完全无效；且页面需通过 HTTPS 访问，HTTP 下 Safari 会直接忽略该标签。
meta 标签的正确写法与参数含义
标准格式如下：
<meta name="apple-itunes-app" content="app-id=123456789, affiliate-data=abc123, app-argument=https://example.com/launch">
app-id 是 App Store 中应用的唯一数字 ID（不是 Bundle ID，也不是应用名），可在 App Store Connect 的“App Information”页找到；affiliate-data 可选，用于归因追踪；app-argument 也非必需，但填了能在用户点击后把该 URL 透传给已安装 App 的 application:openURL:options: 方法。
立即学习“前端免费学习笔记（深入）”；
- 漏掉
app-id或 ID 错误 → 横幅根本不出现 - 用了中文逗号、全角符号或多余空格 → Safari 解析失败，静默忽略
-
app-argument值未经过 URL 编码（含 / ? & 等）→ 链接截断或跳转异常
为什么本地开发时看不到 Banner
常见现象：代码写对了，真机 Safari 打开却没横幅。原因通常有三个：
- 当前访问的是
http://localhost或http://192.168.x.x→ Safari 强制要求 HTTPS，HTTP 协议下无视该 meta - 页面被添加到主屏幕（即“添加到主屏幕”后以 PWA 方式运行）→ Smart Banner 仅在 Safari 浏览器上下文中触发，PWA 环境无横幅
- 设备已安装该 App → Safari 默认不再显示 Banner（除非加
app-argument且 App 支持 deep link，才可能变成“打开 App”按钮）
验证方式：用真实 HTTPS 域名部署，用 iPhone Safari 直接访问，勿通过微信内嵌浏览器（它用的是 WebView，不支持 Smart Banner）。
替代方案与兼容性提醒
Smart Banner 功能有限：无法自定义样式、不能控制显示时机、Android 完全不支持。如果需要跨平台或更灵活的引导，就得自己实现 banner UI，并用 UA 判断 + navigator.standalone 区分环境。
注意：apple-itunes-app 不是通用标准，安卓 Chrome 里写这个 meta 完全无作用；也不要指望它在 iPad 上总显示——iPadOS 15+ 对横幅展示更克制，尤其当页面已有 viewport 缩放或滚动行为复杂时，Safari 可能主动抑制。
真正上线前，务必用真实 iOS 设备 + Safari + HTTPS 环境测一遍，模拟器和桌面 Safari 都不可信。
