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 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
详解react、redux、react-redux之间的关系
Apr 11 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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生成短域名函数
2015/03/23 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
pandas分批读取大数据集教程
2020/06/06 Python
django和flask哪个值得研究学习
2020/07/31 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
法律专业实习鉴定
2013/12/22 职场文书
青年标兵事迹材料
2014/08/16 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android