js判断浏览器的环境(pc端,移动端,还是微信浏览器)


Posted in Javascript onDecember 24, 2020

今天突然看到一段很好的代码,分享给大家,顺便也给自己留个笔记,js判断浏览器的环境具体如下:

方法一:

// 判断浏览器函数
 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端
  }
 }

方法二:这个方法摘自:im.qq.com

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("-----");
}

判断是否为微信客户端:

代码1

window.isInWeixinApp = function() {
    return /MicroMessenger/.test(navigator.userAgent);
  };
/**
   * 判断是否是微信环境
   */
  function getIsWxClient () {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      return true;
    }
    return false;
  };

代码2

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判断当前环境是否为app环境

/**
   *判断是否是app环境
   */
  function getIsApp () {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/isapp/i) == "isapp") {
      return true;
    }
    return false;
  };

js--判断当前环境是否为iphonex环境

/**
   *判断是否是app环境
   */
  function getIsApp () {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/isapp/i) == "isapp") {
      return true;
    }
    return false;
  };

js移动端页面判断是否是iphoneX

function isIPhoneX(fn){
  var u = navigator.userAgent;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  if (isIOS) {    
    if (screen.height == 812 && screen.width == 375){
      //是iphoneX
    }else{
      //不是iphoneX
    } 
  }
}

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 #Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 #Javascript
js实现多个标题吸顶效果
Jan 08 #Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 #Javascript
jquery实现吸顶导航效果
Jan 08 #jQuery
JS实现网站吸顶条
Jan 08 #Javascript
js实现移动端吸顶效果
Jan 08 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
JavaScript事件 "事件对象"的注意要点
2016/01/14 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
Python Django路径配置实现过程解析
2020/11/05 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
追悼会子女答谢词
2014/01/28 职场文书
化工操作工岗位职责
2014/04/29 职场文书
加油口号大全
2014/06/13 职场文书
销售代理协议书
2014/09/30 职场文书
期末考试复习计划
2015/01/19 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016年母亲节广告语
2016/01/28 职场文书
决心书格式及范文
2019/06/24 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Vue如何实现组件间通信
2021/05/15 Vue.js
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
mysql数据库实现设置字段长度
2022/06/10 MySQL