H5页面判断客户端是iOS或是Android并跳转对应链接唤起APP

一、判断客户端

每个客户端都会有自己的 UA （userAgent）标识，可以用 JavaScript 获取客户端标识。

用正则来判断手机是 iOS（苹果）还是 Android（安卓）客户端。代码如下：

// 方法一
   var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Android
    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS
    alert('是否是Android：'+isAndroid);
    alert('是否是iOS：'+isiOS);

// 方法二

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    window.location.href ="pc.html";
};

二、浏览器检查

可以检查是否是移动端（Mobile）、iPad、iPhone、微信、QQ等。

通过判断是否是微信，部分不能用微信打开的页面，可以设置一个引导提示，让用户在浏览器中打开。 

 //判断终端
    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.*/), //是否为移动终端
                ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //Android终端
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                qq: u.match(/sQQ/i) == " qq" //是否QQ
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
// 使用方法：

//判断是否IE内核
if (browser.versions.trident) {
    alert("is IE");
}
//判断是否webKit内核
if (browser.versions.webKit) {
    alert("is webKit");
}
//判断是否移动端
if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
    alert("移动端");
}

// 检测浏览器语言：

currentLang = navigator.language;   //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
    currentLang = navigator.browserLanguage;
}
alert(currentLang);

三、判断iOS/Android跳转相对链接

在H5等移动端页面上，经常会用到一个引导页面，点击按钮跳转下载链接。通常页面会自动判断手机，iOS跳转AppStore，Android直接跳转下载链接或者对应的应用商店页面。

通过上面的讲解，大家会发现，该功能其实也不难实现，代码如下（以微信为例）：

function downApp(){
    var u = navigator.userAgent,
        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
        isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
        urls = {
            'android':'http://dldir1.qq.com/weixin/android/weixin704android1420.apk',
            'ios':'https://itunes.apple.com/cn/app/wei/id414478124',
            'other':'http://weixin.qq.com/d'
        };
    //三元运算
    window.location.href = isAndroid? urls.android : isiOS? urls.ios : urls.other;

}
downApp();

// <a href="javascript:void(0)" onclick="downApp()">点击下载</a>

声明：本文由w3h5原创，转载请注明出处：《H5页面判断客户端是iOS或者Android并跳转对应链接唤起APP》 https://www.w3h5.com/post/334.html