一个二维码解决苹果和安卓手机的应用安装

本文介绍了如何在HTML页面中通过JavaScript检测用户设备是iOS还是Android,并进一步识别华为、小米等安卓品牌,以便于引导用户至对应的App商店。方法涉及在script标签中编写判断条件,确保在默认浏览器下获取userAgent信息,最后将结果应用到二维码生成中。
摘要由CSDN通过智能技术生成

扫描二维码得到的是什么?
是一个网页的链接地址!例如:
pgy.png
扫描以上二维码得到的地址如下:https://www.pgyer.com/ze7NeY

追根溯源就是要在网页中区分当前设备是安卓还是苹果设备,从而根据不同设备跳转到不同商店下载安装包!
国内安卓手机有多个品牌厂商,需要针对安卓设备的品牌进入到对应品牌商店下载安装APP

######1.在html源码中新增script 标签,并在其中新增判断设备类型的方法

 <script>
        // 是否ios终端
        function isIOS() { 
            return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        }

        // android终端
        function isAndroid() { 
            return navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1; 
        }
    </script>

######2.在script 标签,并在其中新增判断设备品牌的方法

 function judgeBrand(sUserAgent) {
            const isHuawei = sUserAgent.match(/huawei/i) == "huawei";
            const isHarmony = sUserAgent.match(/harmonyos/i) == "harmonyos";
            const isHonor = sUserAgent.match(/honor/i) == "honor";
            const isOppo = sUserAgent.match(/oppo/i) == "oppo";
            const isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
            const isVivo = sUserAgent.match(/vivo/i) == "vivo";
            const isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
            const isXiaomiNew = sUserAgent.match(/xiaomi/i) == "xiaomi";
            const isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
            const isRedmi = sUserAgent.match(/redmi/i) == "redmi";

            if (isHuawei || isHarmony) {
                return 'huawei';
            } else if (isHonor) {
                return 'honor';
            } else if (isOppo || isOppoR15) {
                return 'oppo';
            } else if (isVivo) {
                return 'vivo';
            } else if (isXiaomi || isRedmi || isXiaomi2s || isXiaomiNew) {
                return 'xiaomi';
            } else {
                return 'default';
            }
        }

######3. 针对自己特定需求,编写部分界面元素的显隐逻辑

######4. 谨记:需使用设备默认的浏览器, 否则其他浏览器无法正确获取userAgent中的相关信息

######5. 将html文件部署到可以访问的服务器上,获得访问地址

######6. 将获得的访问地址,通过草料二维码转换成二维码,则大功告成!

附上html源码

  • 19
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值