码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-06-06 19:23:16      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:ide   console   else   trident   browser   row   bre   and   uil   

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

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

标签:ide   console   else   trident   browser   row   bre   and   uil   

原文地址:https://www.cnblogs.com/zjt-blogs/p/10986244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!