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