判断移动终端类型安卓苹果鸿蒙、查看设备详细信息、跳转到各手机应用商店、判断APP是否已安装-526互联

案例1：判断移动终端类型，微信扫描二维码链接可以区分华为（荣耀）、安卓、苹果手机。华为及荣耀会跳到华为应用商店、安卓会提示浏览器打开、苹果跳到苹果商店。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>投教基地移动终端信息</title>

        <style>
            body {
              margin: 0; /* 去除页面默认的外边距 */
              padding: 0; /* 去除页面默认的内边距 */              
              background-image: url('./bg.jpg'); /* 设置背景图的URL */
              background-size: cover; /* 背景图覆盖整个页面 */
              background-repeat: no-repeat; /* 背景图不重复 */
              background-color: #ff5b5b;
            }
            #user_agent{
                float:right;
                
            }
        </style>
    </head>
    <body>    
    
    <div id="user_agent"><img decoding="async" src="./open.png" alt="请在右上角浏览器中打开" ></div>
<script type="text/javascript">
var user_agent = window.document.getElementById("user_agent");
var browser = {
  versions: function () {
  var u = navigator.userAgent, app = navigator.appVersion;
  return {//移动终端浏览器版本信息
   trident: u.indexOf('Trident') > -1, //IE内核
   presto: u.indexOf('Presto') > -1, //opera内核
   webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
   mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否为移动终端
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
   android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
   iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
   iPad: u.indexOf('iPad') > -1, //是否iPad
   HUAWEI: u.indexOf('HUAWEI') > -1 || u.indexOf('HarmonyOS') > -1|| u.indexOf('HONOR') > -1, //是否为huawei
   XIAOMI: u.indexOf('MI') > -1 || u.indexOf('redmi') > -1, //是否为小米
   webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
   };
  } (),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {//苹果版 
    window.location.href = "https://itunes.apple.com/cn/app/id1628504846?mt=8";
}

if (browser.versions.android) {//安卓和华为
    if (browser.versions.HUAWEI) {//华为
        window.location.href = "https://url.cloud.huawei.com/nonmWB0rew";
        //is_weixn();//微信不自动跳转浏览器    
    }else{
        
        window.location.href = "https://tjjd-common-1304488676.cos.ap-beijing.myqcloud.com/download/Android/app-tjjd.apk";
        
    }
    
}

is_weixn();
// 是否为微信
function is_weixn(){  
    var ua = navigator.userAgent.toLowerCase();  
    if(ua.match(/MicroMessenger/i)!="micromessenger" ) {  
        //非微信隐藏提示    
        user_agent.style.display = "none";
    } else {  
        //alert('请在右上角浏览器中打开下载');
        //user_agent.innerHTML = '请在右上角浏览器中打开下载';
        //user_agent.style.display = "block";//小米手机失效
       
    }  
}  

</script>
    </body>
</html>

案例2：查看设备信息，用 window.navigator对象测试：

<!DOCTYPE html>
<html lang="zh-CN" version="4">
<head>
    <meta charset="utf-8">
</head>    
<body>

 
<h1>window.navigator对象测试：</h1>
手机<p id="user_agent"></p>
 
<script>

document.write("返回当前浏览器的内部名称（开发代号）navigator.appCodeName：" + navigator.appCodeName + "<br>");
document.write("返回获取浏览器的辅版本号，常用于浏览器的补丁货服务包。navigator.appMinorVersion：" + navigator.appMinorVersion + "<br>");
document.write("返回浏览器的官方名称navigator.appName：" + navigator.appName + "<br>");
document.write("返回浏览器的平台和版本信息navigator.appVersion：" + navigator.appVersion + "<br>");
document.write("返回浏览器是否启用 cookie，启用返回 true，禁用返回 false，navigator.cookieEnabled：" + navigator.cookieEnabled + "<br>");
document.write("返回浏览器是否联网，联网则返回 true，断网则返回 false ，navigator.onLine：" + navigator.onLine + "<br>");
document.write("返回浏览器运行的操作系统平台navigator.platform：" + navigator.platform + "<br>");
document.write("返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称navigator.userAgent：" + navigator.userAgent + "<br>");
document.write("返回浏览器是否支持运行 Java Applet 小程序，支持则返回 true，不支持则返回 false，navigator.javaEnabled()：" + navigator.javaEnabled() + "<br>");

document.write("返回获取当前浏览器的语言，例如，可能的一个结果是“zh-CN”navigator.language：" + navigator.language + "<br>");
document.write("返回获取计算机系统的 CPU 型号，例如，Inter通常得到的结果是x86。navigator.cpuClass   ：" + navigator.cpuClass + "<br>");
document.write("返回获取 OS 使用的默认语言。navigator.systemLanguage  ：" + navigator.systemLanguage + "<br>");
document.write("返回获取浏览器支持的所有的MIME类型的数组。navigator.mimeTypes   ：" + navigator.mimeTypes + "<br>");
document.write("获取安装在浏览器上的所有插件的数组navigator.plugins   ：" + navigator.plugins + "<br>");
document.write("获取浏览器的产品名，例如，可能的结果是Gecko。navigator.product ：" + navigator.product  + "<br>");

document.write("返回 获取浏览器产品的更多信息，例如，可能的结果是20030107。navigator.productSub   ：" + navigator.productSub + "<br>");
document.write("获取浏览器的厂商名称，例如，可能的结果是Google Inc.。navigator.vendor  ：" + navigator.vendor  + "<br>");
document.write("获取浏览器的厂商更多信息navigator.vendorSub   ：" + navigator.vendorSub  + "<br>");


  var user_agent = window.document.getElementById("user_agent");

  
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;//android终端
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      //android端
      if (isAndroid) {
        let hidden =
          window.document.hidden ||
          window.document.mozHidden ||
          window.document.msHidden ||
          window.document.webkitHidden;
        if (typeof hidden == "undefined" || hidden == false) {
          //window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=fundtown.toujiao"; //安卓应用市场地址
          user_agent.innerHTML = '安卓';
        }
      } else if (isIOS) {
        //ios端
        let hidden =
          window.document.hidden ||
          window.document.mozHidden ||
          window.document.msHidden ||
          window.document.webkitHidden;
        if (typeof hidden == "undefined" || hidden == false) {
          window.location.href = "https://itunes.apple.com/cn/app/id1628504846?mt=8"; //app store地址
          user_agent.innerHTML = '苹果';
        }
      }  
  
  

</script>
</body>
</html>

案例3：JS跳转到各手机应用商城

<script type="text/javascript">
//js跳转到各手机应用商城
//1.是否是内置浏览器
function is_neizhi() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return "weixin";
    } else if (ua.match(/QQ/i) == "qq") {
        return "QQ";
    } else if (ua.match(/Alipay/i) == "alipay" && payway == 2) {
        return "alipay";
    }
    return false;
}
//2.判断手机品牌
function verifyBrand() {
    const userAgent = navigator.userAgent.toLowerCase()
    const isIphone = userAgent.match(/(iphone|ipad|ipod)/i);
    const isHuawei = userAgent.match(/huawei/i);
    const isHonor = userAgent.match(/honor/i);
    const isOppo = userAgent.match(/oppo/i);
    const isOppoR15 = userAgent.match(/PACM00/i);
    const isVivo = userAgent.match(/vivo/i);
    const isXiaomi = userAgent.match(/mi\s/i);
    const isXIAOMI = userAgent.match(/xiaomi/i);
    const isXiaomi2s = userAgent.match(/mix\s/i);
    const isRedmi = userAgent.match(/redmi/i);
    const isSamsung = userAgent.match(/sm-/i);
    const isSamsung2 = userAgent.match(/samsung/i);
    if (isIphone) {
        return 'iphone'
    } else if (isHuawei || isHonor) {
        return 'huawei';
    } else if (isOppo || isOppoR15) {
        return 'oppo';
    } else if (isVivo) {
        return 'vivo';
    } else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) {
        return 'xiaomi';
    } else if (isSamsung || isSamsung2) {
        return 'samsung';
    } else {
        return 'other'
    }
}
//3.跳转下载的主方法,如果是内置浏览器,需要跳转到手机自带的浏览器方可使用
function goDownload() {
    if (is_neizhi()){
        //内置浏览器
        alert('请用自带浏览器打开')
        return;
    }
    const iosLinkUrl = "https://itunes.apple.com/cn/app/id1628504846?mt=8";//苹果
    const androidLinkurl ="https://tjjd-common-1304488676.cos.ap-beijing.myqcloud.com/download/Android/app-tjjd.apk";//安卓其他
    const huaweiUrl = 'appmarket://details?id=fundtown.toujiao';//华为
    const oppoUrl = "oppomarket://details?packagename=fundtown.toujiao";//oppo
    const vivoUrl = "vivomarket://details?id=fundtown.toujiao";//vivo
    const xiaomiUrl = 'mimarket://details?id=fundtown.toujiao';//小米
    const samsungUrl = 'samsungapps://ProductDetail/fundtown.toujiao';//三星
    //以下未用到
    const qqChal="tmast://appdetails?pname=fundtown.toujiao"; // 应用宝 直接下载
    const baiduChal="http://market.android.com/details?id=<PackageName>"; // 百度搜狗网页
    const jinliChal="http://m.appgionee.com/marketdetail?id=<PackageName>"; // 金立网页
    const lenovoChal="http://market.lenovomm.com/details?id=<PackageName>"; // 联想
    const anzhiChal="anzhimarket://details?id=<PackageName>"; // 安智市场
    const meizuChal="mstore://details?package_name=<PackageName>"; // 魅族


    switch (this.verifyBrand()) {
        case 'iphone':
            window.location.href=iosLinkUrl ;
            break;
        case 'xiaomi':
            window.location.href=xiaomiUrl;
            break;
        case 'huawei':
            window.location.href=huaweiUrl;
            break;
        case 'vivo':
            window.location.href=vivoUrl;
            break;
        case 'oppo':
            window.location.href=oppoUrl;
            break;
        case 'samsung':
            window.location.href=samsungUrl;
            break;
        default:
            window.location.href=androidLinkurl;
            break;
    }
}
 goDownload()
</script>

判断APP（sms为例）是否已经安装，安装打开否则下载

 　　　　　　　　　var u = navigator.userAgent;
                var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

                // 微信内
                if(isWeixin) {
                    alert('请在浏览器上打开')
                } else {
                    //android端
                    if (isAndroid) {
                        //安卓app的scheme协议
                        window.location.href = 'sms://';
                        setTimeout(function(){
                            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
                            if(typeof hidden =="undefined" || hidden ==false){
                                //下载
                                window.location.href ="https://xxxx";
                            }
                        }, 2000);
                    }
                    //ios端
                    if (isIOS) {
                        //ios的scheme协议
                        window.location.href = 'sms://'
                        setTimeout(function(){
                            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
                            if(typeof hidden =="undefined" || hidden ==false){
                                //App store下载地址
                                window.location.href = "http://itunes.apple.com/app/xx";
                            }
                        }, 2000);
                    }
                }