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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
javascript call和apply方法
Nov 24 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
vue 搭建后台系统模块化开发详解
May 01 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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP $_FILES函数详解
2011/03/09 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python如何调用php文件中的函数详解
2020/12/29 Python
Django中template for如何使用方法
2021/01/31 Python
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
留学自荐信写作方法
2014/01/27 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
工作后的感想
2015/08/07 职场文书