如何实现桌面端按设备跳转至App Store/Google Play的CTA？

当然有，桌面端可以通过以下几种方案实现类似移动端多链接二维码的设备识别跳转：

1. 前端JS直接检测跳转 #

这是最便捷的方案，纯前端就能实现，不需要后端支持。通过读取浏览器的navigator.userAgent信息判断设备类型，点击按钮时自动跳转到对应商店链接。

示例代码：

<button id="downloadBtn">立即下载App</button>

<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
  const userAgent = navigator.userAgent.toLowerCase();
  let storeUrl = '';
  
  // 检测iOS设备
  if (/iphone|ipad|ipod/.test(userAgent)) {
    storeUrl = 'https://apps.apple.com/cn/app/你的应用ID';
  } 
  // 检测Android设备
  else if (/android/.test(userAgent)) {
    storeUrl = 'https://play.google.com/store/apps/details?id=你的应用包名';
  } 
  // 默认跳转（比如官网或通用下载页）
  else {
    storeUrl = 'https://你的官网地址';
  }
  
  window.location.href = storeUrl;
});
</script>

2. 后端服务器端检测跳转 #

如果你的页面是动态渲染的，可以在后端层面完成设备检测，直接返回对应跳转链接或渲染不同的按钮。

思路：后端读取请求头中的User-Agent字段，判断设备类型后，要么直接302重定向到对应商店，要么在页面渲染时给按钮赋予对应链接。比如用Node.js的Express框架可以这么处理：

app.get('/download', (req, res) => {
  const userAgent = req.headers['user-agent'].toLowerCase();
  if (/iphone|ipad|ipod/.test(userAgent)) {
    res.redirect('https://apps.apple.com/cn/app/你的应用ID');
  } else if (/android/.test(userAgent)) {
    res.redirect('https://play.google.com/store/apps/details?id=你的应用包名');
  } else {
    res.redirect('https://你的官网地址');
  }
});

前端按钮直接指向这个后端路由即可：<a href="/download" class="cta-btn">立即下载App</a>

3. 通用链接/应用链接适配 #

苹果的Universal Links和安卓的App Links不仅支持移动端，桌面端浏览器（比如Safari、Chrome）也能识别。配置后，用户点击链接时，若设备是对应系统且已安装应用，会直接唤起App；未安装则跳转到应用商店。

需要提前在开发者后台完成域名关联配置，之后按钮链接直接使用配置好的通用链接即可，无需额外检测逻辑。

注意事项 #

• User-Agent检测存在一定误差，部分浏览器会伪装UA，建议结合navigator.platform等其他字段辅助判断。
• 务必在不同浏览器（Chrome、Safari、Edge等）和设备（Mac、Windows、Linux）上测试跳转逻辑，确保覆盖场景。

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