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 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
javascript变量声明实例分析
Apr 25 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 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实现文件上传及头像预览功能
2017/01/15 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
js的一些常用方法小结
2011/06/29 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python多重继承新算法C3介绍
2014/09/28 Python
python查询mysql中文乱码问题
2014/11/09 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
浅谈python出错时traceback的解读
2020/07/15 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
仓管员岗位职责范文
2013/11/08 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
计划生育证明书写要求
2014/09/17 职场文书
如何写辞职书
2015/02/26 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
Java版 单机五子棋
2022/05/04 Java/Android