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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
js实现缓动动画
Nov 25 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
成教自我鉴定
2013/10/27 职场文书
小学教师自我鉴定
2013/11/07 职场文书
企业统计员岗位职责
2013/12/13 职场文书
授权委托书格式模板
2014/04/03 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
结婚典礼致辞
2015/07/28 职场文书
2016教师节问候语
2015/11/10 职场文书
七年级生物教学反思
2016/02/20 职场文书
python如何读取.mtx文件
2021/04/22 Python