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 相关文章推荐
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
node.js实现端口转发
Apr 14 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
修改Vue打包后的默认文件名操作
Aug 12 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
C# Assembly类访问程序集信息
2009/06/13 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php无序树实现方法
2015/07/28 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python检测网站链接是否已存在
2016/04/07 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
怎样比较两个类型为String的字符串
2016/08/17 面试题
理工类毕业自我鉴定
2014/02/20 职场文书
李开复演讲稿
2014/05/24 职场文书
伦敦奥运会口号
2014/06/13 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
财务工作失职检讨书
2014/11/21 职场文书
先进单位申报材料
2014/12/25 职场文书
学生会招新宣传语
2015/07/13 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python