如何创建类似Facebook的iOS智能横幅？无apple-itunes-app元标签

Facebook的iOS智能横幅并非用Apple官方的<meta name="apple-itunes-app">标签实现，而是自定义的模拟原生样式组件——毕竟原生标签的尺寸、关闭按钮都是iOS系统硬控的，完全没法满足定制需求。下面是具体实现方案：

核心思路 #

放弃原生智能横幅，自己实现一个仅在iOS Safari环境下显示的自定义组件，精准控制样式、布局和交互。

具体实现步骤 #

1. 检测iOS Safari环境

用JS判断当前设备和浏览器，避免在非目标环境显示横幅：

function isiOSSafari() {
  const userAgent = window.navigator.userAgent;
  // 匹配iOS设备，且是原生Safari（排除Chrome/Firefox等iOS浏览器）
  return /iPhone|iPad|iPod/.test(userAgent) && /Safari/.test(userAgent) && !/CriOS|FxiOS|EdgiOS/.test(userAgent);
}

2. 构建横幅HTML结构

做无关闭按钮的紧凑版，结构尽量简洁：

<!-- 自定义智能横幅，默认隐藏 -->
<div id="customSmartBanner" style="display: none;">
  <img src="你的App图标地址" alt="App图标" class="banner-icon">
  <div class="banner-info">
    <div class="app-name">你的App名称</div>
    <div class="app-desc">简洁功能描述</div>
  </div>
  <a href="itms-apps://itunes.apple.com/app/id你的AppID" class="banner-btn">打开</a>
</div>

3. 编写紧凑风格的CSS

模仿原生智能横幅的视觉风格，压缩高度、做毛玻璃背景：

#customSmartBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px; /* 比原生默认的54px更紧凑 */
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  padding: 0 12px;
  z-index: 9999;
}

.banner-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin-right: 10px;
}

.banner-info {
  flex: 1;
}

.app-name {
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.app-desc {
  font-size: 12px;
  color: #666;
}

.banner-btn {
  font-size: 14px;
  font-weight: 600;
  color: #007aff;
  text-decoration: none;
}

4. 控制横幅显示逻辑

页面加载完成后，检测到iOS Safari就显示横幅：

window.addEventListener('load', () => {
  if (isiOSSafari()) {
    document.getElementById('customSmartBanner').style.display = 'flex';
  }
});

额外优化建议 #

• 若要实现“已安装App则打开，未安装则跳App Store”，可以用Universal Link替换itms-apps://链接，iOS会自动处理跳转逻辑。
• 可通过localStorage添加“仅显示一次”的逻辑，记录用户是否已查看过横幅，避免重复打扰。

内容的提问来源于stack exchange，提问作者Rifan