如何使用JS检测搭载Android系统的华为设备

问题背景 #

我需要将移动用户引导至对应应用商店，当前代码在Android和iOS设备上运行正常，但搭载Android系统的华为设备无法被正确识别（注：userAgent仅能检测操作系统，无法精准识别华为设备），希望找到可行的浏览器检测方法。

现有代码 #

<script>
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
// Huawei Phone must come first because its UA also contains "Android"

if (userAgent.includes("HUAWEI") || userAgent.includes("huawei") || userAgent.includes("Huawei")) {
    window.location.replace("https://appgallery.huawei.com/app/C104724711");

} else if (userAgent.includes("Android")) {
    window.location.replace("https://play.google.com/store/apps/details?id=com.emlakbank.mobil&hl=tr&gl=US");
} else if (userAgent.includes("iPhone") || userAgent.includes("Ipad") || userAgent.includes("iPod")) {
    setTimeout(function() {
        window.location = "https://apps.apple.com/tr/app/emlak-kat%C4%B1l%C4%B1m/id1467874818?l=tr";
    }, 25);
    window.location("https://apps.apple.com/tr/app/emlak-kat%C4%B1l%C4%B1m/id1467874818?l=tr");
    //If the second line of code gives a result then the first row is never executed.
} else {
    //cant be sure about device, so redirect to home page
    //  window.location.replace("https://google.ro");
}
</script>

可行的检测方案 #

1. 扩展User-Agent关键词检测 #

部分华为设备的User-Agent会包含HUAWEI之外的标识，比如设备型号前缀（如Mate、P系列）或品牌变体，可扩展检测逻辑提升覆盖度：

const isHuawei = /(huawei|HUAWEI|Huawei|mate|Mate|P\d+|p\d+|nova|Nova)/i.test(navigator.userAgent);

不过这种方法仍有局限性，部分华为设备可能不会在UA中暴露这些标识。

2. 检测华为专属浏览器/服务特性 #

如果用户使用华为自带浏览器，可通过以下特征辅助判断：

• 华为浏览器的navigator.vendor可能包含Huawei
• 部分设备会暴露华为移动服务相关的JS接口，比如window.HuaweiMobileServices

示例优化代码：

function isHuaweiDevice() {
    // 检测UA中的华为标识
    const uaMatch = /(huawei|HUAWEI|Huawei)/i.test(navigator.userAgent);
    // 检测华为浏览器厂商信息
    const vendorMatch = /Huawei/i.test(navigator.vendor);
    // 检测华为移动服务接口
    const hasHMS = typeof window.HuaweiMobileServices !== 'undefined';
    
    return uaMatch || vendorMatch || hasHMS;
}

// 应用检测逻辑
if (isHuaweiDevice()) {
    window.location.replace("https://appgallery.huawei.com/app/C104724711");
} else if (/Android/i.test(navigator.userAgent)) {
    window.location.replace("https://play.google.com/store/apps/details?id=com.emlakbank.mobil&hl=tr&gl=US");
}
// 其余iOS及默认逻辑保持不变

3. 后端辅助检测（备用方案） #

如果前端检测效果不佳，可结合后端的IP段特征（华为设备的常见IP范围）或设备指纹服务来辅助判断，但该方案需要后端支持，且精准度依赖数据的实时更新。

注意事项 #

• 所有前端检测方法都无法做到100%精准，因为设备UA可被修改，部分华为设备可能不会暴露明显标识
• 建议在页面中增加手动选择应用商店的入口，避免误判导致用户无法正常下载应用

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