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 void(0)的妙用
Oct 21 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JS函数重载的解决方案
May 13 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
介绍一下28个JS常用数组方法
May 06 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
为数据添加append,remove功能
2006/10/03 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
React实现todolist功能
2020/12/28 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
python实现用户登录系统
2016/05/21 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python系列 文件操作的代码
2019/10/06 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python zip()函数的使用示例
2020/09/23 Python
《傅雷家书》教学反思
2014/04/20 职场文书
班级团队活动方案
2014/08/14 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
停发工资证明范本
2015/06/12 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android