前端

【JS】—-判断客户端类型

云博小周宇2 Mins Read

JS 判断客户端是iOS还是Android

判断的逻辑是：客户端不是Android，就是iOS，就是PC，其实还有黑莓BlackBerry、塞班SymbianOS、Windows Phone等，如果需要可自行添加，我在第三条有写。

通过浏览器的 navigator.userAgent 判断是Android还是iOS：

一. 判断是Android还是iOS

let u = navigator.userAgent; let isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //判断是否是 android终端 let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端 console.log(‘是否是Android：‘, isAndroid); //true,false console.log(‘是否是iOS：‘, isIOS) 复制代码
  • 封装成方法：
  /*判断客户端*/ judgeClient() { let u = navigator.userAgent; let isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //判断是否是 android终端 let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端 console.log(‘是否是Android：‘ + isAndroid); //true,false console.log(‘是否是iOS：‘ + isIOS); if(isAndroid){ return ‘Android‘; }else if(isIOS){ return ‘IOS‘; }else{ return ‘PC‘; } }, 复制代码

二.判断是Android还是iOS

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { console.log(‘isIOS‘); } else if (/(Android)/i.test(navigator.userAgent)) { console.log(‘isAndroid‘); } else { console.log(‘isPC‘); } 复制代码
  • 封装成方法：
  /*判断客户端*/ judgeClient() { let client = ‘‘; if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS client = ‘iOS‘; } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android client = ‘Android‘; } else { client = ‘PC‘; } return client; }, 复制代码

三.判断PC还是移动端

  isPC() {
    /*true则pc，false则mobile*/ let u = navigator.userAgent; let Agents = ["Android", "iPhone", "webOS", "BlackBerry", "SymbianOS", "Windows Phone", "iPad", "iPod"]; let flag = true; for (let i = 0; i < Agents.length; i++) { if (u.indexOf(Agents[i]) > 0) { flag = false; break; } } return flag; }, 复制代码

四.判断多种访问终端

  //判断访问终端 let browser = { versions: function () { let 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, //是否微信 qq: u.match(/\sQQ/i) == " qq" //是否QQ }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() }; 复制代码
  • 使用
if (browser.versions.mobile) { console.log("is mobile"); } if (browser.versions.ios) { console.log("is ios"); } 复制代码

五.判断浏览器当前使用的语言

  judgeLanguage() {
    // 判断浏览器当前使用的语言 let currentLanguage = (navigator.browserLanguage || navigator.language).toLowerCase(); // 非IE if (!currentLanguage) { // IE浏览器 currentLanguage = navigator.browserLanguage; } console.log(currentLanguage); return currentLanguage; },


https://juejin.im/post/5b972dcf5188255c781ca01b#heading-4