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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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/12/04 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python 正则式使用心得
2009/05/07 Python
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
python利用opencv实现颜色检测
2021/02/23 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
《生命 生命》教学反思
2014/04/19 职场文书
初中生操行评语大全
2014/04/24 职场文书
售后服务承诺书模板
2014/05/21 职场文书
119消防日活动总结
2014/08/29 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技