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