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实现轮显新闻标题链接
Aug 13 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 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实现数字补零功能的2个函数介绍
2014/05/12 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
详解webpack babel的配置
2018/01/09 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
简洁的十分钟Python入门教程
2015/04/03 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Python tkinter和exe打包的方法
2020/02/05 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
一套SQL笔试题
2016/08/14 面试题
酒店营销策划方案
2014/02/07 职场文书
竞聘书格式及范文
2014/03/31 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
学生安全责任书范本
2014/07/24 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
关于安全的广播稿
2014/10/23 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
政协委员个人总结
2015/03/03 职场文书
南京南京观后感
2015/06/02 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
详解Go语言中Get/Post请求测试
2022/06/01 Golang
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android