如何在移动浏览器中提示本机应用程序安装

Question

您好，我想在移动浏览器中显示一个横幅，以提示用户从商店（Google Play 或 Apple）下载应用程序。以下示例横幅就是一个示例

对于 IOS，我发现了这个。看来它只适用于 safari 浏览器。有什么方法可以为其他浏览器实现它吗？

对于 Android，我发现了这个。它适用于 PWA。我尝试在我们的网站（不是 PWA）中实现它，但没有显示任何内容。

有什么方法可以在两个操作系统和所有最新的浏览器中工作吗？如果没有，我如何获得评级、最新图标并检查该国家/地区是否支持？

Answer 1

iOS 智能应用横幅

为了在访问者使用 iOS 设备（iPhone、iPod 或 iPad）打开您的网站时显示横幅，您只需在 HTML 代码的 head 元素中包含以下行：

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

Android 智能应用横幅

Android 上没有对智能应用横幅的本机支持，但您可以使用 jQuery 插件代替。

首先，下载插件并上传到您的服务器 jquery.smartbanner.css 和 jquery.smartbanner.js。

然后，您需要包含两个代码片段。head 元素中的第一个：

<meta name="google-play-app" content="app-id=com.package.android">
<link rel="stylesheet" href="/path/a/jquery.smartbanner.css" type="text/css" 
media="screen">

第二段代码必须包含在主体的末尾。

<!-- copy body -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">. 
</script>
<script src="/path/a/jquery.smartbanner.js"></script>
<script type="text/javascript">
  $().smartbanner();
</script>
<!-- end copy body -->