JS判断浏览器环境（pc端，移动端，还是微信浏览器）

PetitQ HTML/CSS 2020-12-09 2.09K 0 0

今天突然看到一段很好的代码，分享给大家，顺便也给自己留个笔记。我们部署在 Web 服务器上的前端应用，既可以用 PC 浏览器访问，也可以用手机浏览器访问，再加上现在智能设备的推广，我们甚至能在车载系统、穿戴设备和电视平台上访问。设备的多样化让用户无处不在，有时候我们需要根据不同的浏览器运行环境做出对应的处理。浏览器是 JavaScript 的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我们的业务逻辑。

然而浏览器品牌众多，有些浏览器使用的标准也不太一样，造就了难以统一的判断。下面我大概罗列一下常用的浏览器品牌和在什么情况下使用浏览器运行环境判断。

也想出现在这里？联系我们吧

方法一：

```
// 判断浏览器函数
```
```
  function isMobile(){
```

    if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {

```
      return true; // 移动端
```
```
    }else{
```
```
      return false; // PC端
```
```
    }
```
```
  }
```

方法二：

```
var os = function() { 
```
```
   var ua = navigator.userAgent, 
```

   isWindowsPhone = /(?:Windows Phone)/.test(ua),

   isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,

   isAndroid = /(?:Android)/.test(ua),

   isFireFox = /(?:Firefox)/.test(ua),

   isChrome = /(?:Chrome|CriOS)/.test(ua),

   isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),

   isPhone = /(?:iPhone)/.test(ua) && !isTablet,

   isPc = !isPhone && !isAndroid && !isSymbian;

```
   return { 
```
```
     isTablet: isTablet, 
```
```
     isPhone: isPhone, 
```
```
     isAndroid : isAndroid, 
```
```
     isPc : isPc 
```
```
   }; 
```
```
}(); 
```
```
 
```
```
// 使用方法 
```
```
if(os.isAndroid || os.isPhone){
```
```
alert("-----");
```
```
}
```

判断是否为微信客户端：

```
var isWechart = function () {
```
```
    var rst = true
```

    if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){

      var ua = navigator.userAgent.toLowerCase();

      if (!(ua.match(/MicroMessenger/i) == "micromessenger")) {

```
        rst = false;
```
```
      }
```
```
    }else {
```
```
      rst = false;
```
```
    }
```
```
    return rst;
```
```
  }
```

判断微信浏览器是 PC 端还是手机端，以及手机端是微信浏览器还是非微信浏览器

```
//平台、设备和操作系统  
```
```
     var system = { 
```
```
       win: false, 
```
```
       mac: false, 
```
```
       xll: false, 
```
```
       ipad: false 
```
```
     }; 
```
```
     //检测平台  
```
```
     var p = navigator.platform; 
```

     system.win = p.indexOf("Win") == 0;

     system.mac = p.indexOf("Mac") == 0;

     system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

     system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;

     //跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面

     if (system.win || system.mac || system.xll || system.ipad) {

```
       alert("在PC端上打开的");
```
```
     } else { 
```

       var ua = navigator.userAgent.toLowerCase();

       if(ua.match(/MicroMessenger/i)=="micromessenger") {

         alert("在手机端微信上打开的");

```
       } else {  
```

         alert("在手机上非微信上打开的");

```
       }  
```
```
     }
```

下面是其他应用场景，注释中表明了通过 JS 如何判断是否在微信浏览器打开，是否在 QQ 空间浏览器，是否在新浪微博打开。当然可以做得更完善一点，再加上判断是在移动设备打开还是在 PC 端浏览器打开的，更加细分一点，可以判断是在安卓系统的浏览器打开的还是 IOS 系统浏览器打开的。

if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面

        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

        if (ua.match(/MicroMessenger/i) == "micromessenger") {

```
                //在微信中打开
```
```
        }
```

        if (ua.match(/WeiBo/i) == "weibo") {

                //在新浪微博客户端打开

```
        }
```
```
        if (ua.match(/QQ/i) == "qq") {
```
```
                //在QQ空间打开
```
```
        }
```
```
        if (browser.versions.ios) {
```

                //是否在IOS浏览器打开

```
        } 
```
```
        if(browser.versions.android){
```

                //是否在安卓浏览器打开

```
        }
```
```
} else {
```
```
        //否则就是PC浏览器打开
```
```
}
```

再附上 browser 的代码，通过以下方法可以判断很多浏览器。包括判断 IE 浏览器，Opera 浏览器，苹果浏览器，谷歌浏览器，火狐浏览器等。

```
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('Linux') > -1, //android终端或uc浏览器

            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器

            iPad: u.indexOf('iPad') > -1, //是否iPad

            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部

```
        };
```
```
    }(),
```

    language: (navigator.browserLanguage || navigator.language).toLowerCase()

```
}
```

写到最后总结得差不多了，后续如果我想起还有哪些判断浏览器运行环境终极方案遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。

JS 判断浏览器环境（pc 端，移动端，还是微信浏览器）

已有 522 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

HTML/CSS

JS判断浏览器环境（pc端，移动端，还是微信浏览器）

方法一：

方法二：

判断是否为微信客户端：

JS 判断浏览器环境（pc 端，移动端，还是微信浏览器）

相关文章

纯CSS粘住固定底部的5种方法

CSS 自定义浏览器滚动条样式

iframe 嵌入网页自动延伸高度保持嵌入网页高度

发表回复取消回复

热销模板

HTML/CSS

方法一：

方法二：

判断是否为微信客户端：

JS 判断浏览器环境（pc 端，移动端，还是微信浏览器）

相关文章

发表回复 取消回复

热销模板

发表回复取消回复