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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
Three.js学习之几何形状
Aug 01 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
最新最全的手机号验证正则表达式
Feb 24 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删除数组中指定下标的元素方法
2018/02/03 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python 用户登录验证的小例子
2013/03/06 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
财务经理岗位职责
2013/11/09 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
实习心得体会
2014/01/02 职场文书
社区志愿者心得体会
2014/01/03 职场文书
地球一小时宣传标语
2014/06/24 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android