如何在应用下载跳转页中识别华为设备并跳转至华为应用市场链接
实现方案
华为设备(含鸿蒙系统设备、EMUI系统安卓设备)的User-Agent请求头中会携带专属标识,我们可以通过匹配这些标识实现华为设备识别,调整跳转逻辑的优先级即可实现需求,修改后的完整代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Test</title> <script> function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; } // 新增华为设备检测函数 function isHuaweiDevice() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // 匹配鸿蒙、华为安卓的UA特征 return /HarmonyOS|HUAWEI|EMUI/i.test(userAgent); } </script> </head> <body onload="DetectAndServe()"> <script> function DetectAndServe() { let os = getMobileOperatingSystem(); if (os == "Android") { // 先判断是否为华为设备,优先跳转华为应用市场 if (isHuaweiDevice()) { // 替换为你的应用对应的华为应用市场链接 window.location.href = "https://appgallery.huawei.com"; } else { window.location.href = "https://play.google.com"; } } else if (os == "iOS") { window.location.href = "https://apps.apple.com"; } else { window.location.href = "https://my-link.com"; } } </script> </body> </html>
注意事项
- 请将代码中华为应用市场的示例链接替换为你自己的应用对应的官方直达链接
- 该识别逻辑依赖设备默认UA标识,部分自定义浏览器、修改过UA的设备可能出现识别偏差,属于正常场景
- 鸿蒙系统的UA也会携带Android标识,放在安卓分支下判断即可覆盖鸿蒙设备场景
内容的提问来源于stack exchange,提问作者user16725381
相关产品推荐
相关产品推荐

