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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
webpack入门+react环境配置
Feb 08 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
mysql 性能的检查和优化方法
2009/06/21 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
限制复选框的最大可选数
2006/07/01 Javascript
解决FLASH需要点击激活的代码
2006/12/20 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Python中if __name__ == "__main__"详细解释
2014/10/21 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
Python判断telnet通不通的实例
2019/01/26 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python图像读写方法对比
2020/11/16 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
西部世纪面试题
2014/12/05 面试题
大学生期末自我鉴定
2014/02/01 职场文书
财务会计自荐信范文
2014/02/21 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
Vue操作Storage本地化存储
2022/04/29 Vue.js