h5頁面如何判斷是系統Android,ios還是微信等


通過ua來判斷內核:

移動端判斷簡易版:

let ua = navigator.userAgent;
let isAndroid = /android/i.test(ua);
let isIOS = /(iPhone|iPad|iPod|IOS)/i.test(ua);
let isWechat = /microMessenger/i.test(ua);

 

如何通過ua區分QQ內置瀏覽器與QQ瀏覽器:

  • 在Android上

QQ內置環境的ua中有關鍵字 MQQBrowser, 並且后面有一個QQ字符,QQ瀏覽器則沒有。
因此在Android上區分,需要用正則判斷ua中包含MQQBrowser並且之后包含QQ,則是QQ內置瀏覽器,ua中包含MQQBrowser但是不包含QQ則是QQ瀏覽器

  • 在ios上

QQ內置瀏覽器的ua包含一個空格加QQ,但是不包含MQQBrowser
QQ瀏覽器ua包含MQQBrowser但是不包含單獨的QQ

const isIosQQ = (isIos && / QQ/i.test(navigator.userAgent));
const isAndroidQQ = (isAndroid && /MQQBrowser/i.test(navigator.userAgent) && /QQ/i.test((navigator.userAgent).split('MQQBrowser')));

 

移動端判斷詳細版:

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.*/) || !!u.match(/AppleWebKit/), //是否為移動終端
      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
      webApp: u.indexOf('Safari') == -1 //是否web應該程序,沒有頭部與底部
    };
  }(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
}


if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
 //如果是ios系統就執行
 console.log('這是ios系統');
}
else if (browser.versions.android) {
  //如果是android系統就執行
  console.log('這是android系統');
}

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
   console.log('這是微信瀏覽器')
} else {
  console.log('這不是微信瀏覽器');
}

 

判斷是移動端還是PC端:

if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { 
    //移動端
     console.log("這是移動端");
}else{
    //pc端
     console.log("這是pc端");
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM