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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
体育教师自我鉴定
2014/02/12 职场文书
基督教婚礼主持词
2014/03/14 职场文书
十八大演讲稿
2014/05/22 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Python中else的三种使用场景
2021/06/16 Python