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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
小程序自定义圆形进度条
Nov 17 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
Admin generator, filters and I18n
2011/10/06 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
将Django项目部署到CentOs服务器中
2018/10/18 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
计算机应用专业推荐信
2013/11/13 职场文书
优秀广告词大全
2014/03/19 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
python基础之文件处理知识总结
2021/05/23 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android