JS判断浏览器类型与操作系统的方法分析


Posted in Javascript onApril 30, 2020

本文实例讲述了JS判断浏览器类型与操作系统的方法。分享给大家供大家参考,具体如下:

navigator.userAgent : userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

navigator.platform : platform 属性是一个只读的字符串,声明了运行浏览器的操作系统和(或)硬件平台。

判断浏览器类型

IE浏览器

ie = ua.match( /MSIE\s([\d\.]+)/ ) || ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),

IE浏览器版本号

/msie 8.0/.test(navigator.userAgent.toLowerCase())

微信浏览器

/micromessenger/.test(navigator.userAgent.toLowerCase())

chrome

/chrome/.test(navigator.userAgent.toLowerCase())

firefox

/safari/.test(navigator.userAgent.toLowerCase())

opera

/micromessgenger/.test(navigator.userAgent.toLowerCase())

判断操作系统类型

win操作系统

navigator.platform == "Win32"
 navigator.platform == "Windows"

mac操作系统

navigator.platform == "Mac68K"
   navigator.platform == "MacPPC"
   navigator.platform == "Macintosh"
   navigator.platform == "MacIntel"

andorid操作系统

if(/Linux/i.test(navigator.userAgent)){
     if(/android/i.test(navigator.userAgent.toLowerCase())){
       return "android";
     }
   }
/**
     * @description 简单的浏览器检查结果。
     *
     * * `webkit` webkit版本号,如果浏览器为非webkit内核,此属性为`undefined`。
     * * `chrome` chrome浏览器版本号,如果浏览器为chrome,此属性为`undefined`。
     * * `ie` ie浏览器版本号,如果浏览器为非ie,此属性为`undefined`。**暂不支持ie10+**
     * * `firefox` firefox浏览器版本号,如果浏览器为非firefox,此属性为`undefined`。
     * * `safari` safari浏览器版本号,如果浏览器为非safari,此属性为`undefined`。
     * * `opera` opera浏览器版本号,如果浏览器为非opera,此属性为`undefined`。
     *
     * @property {Object} [browser]
     */
    browser: (function( ua ) {
      var ret = {},
        webkit = ua.match( /WebKit\/([\d.]+)/ ),
        chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
          ua.match( /CriOS\/([\d.]+)/ ),

        ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
          ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),
        firefox = ua.match( /Firefox\/([\d.]+)/ ),
        safari = ua.match( /Safari\/([\d.]+)/ ),
        opera = ua.match( /OPR\/([\d.]+)/ );

      webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
      chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
      ie && (ret.ie = parseFloat( ie[ 1 ] ));
      firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
      safari && (ret.safari = parseFloat( safari[ 1 ] ));
      opera && (ret.opera = parseFloat( opera[ 1 ] ));

      return ret;
    })( navigator.userAgent ),

    /**
     * @description 操作系统检查结果。
     *
     * * `android` 如果在android浏览器环境下,此值为对应的android版本号,否则为`undefined`。
     * * `ios` 如果在ios浏览器环境下,此值为对应的ios版本号,否则为`undefined`。
     * @property {Object} [os]
     */
    os: (function( ua ) {
      var ret = {},

        // osx = !!ua.match( /\(Macintosh\; Intel / ),
        android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
        ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );

      // osx && (ret.osx = true);
      android && (ret.android = parseFloat( android[ 1 ] ));
      ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));

      return ret;
    })( navigator.userAgent ),
Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
JavaScript自定义超时API代码实例
Apr 30 #Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 #Javascript
JavaScript find()方法及返回数据实例
Apr 30 #Javascript
js this 绑定机制深入详解
Apr 30 #Javascript
JS 图片压缩原理与实现方法详解
Apr 29 #Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 #Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 #Javascript
You might like
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
老生常谈js数据类型
2017/08/03 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
写给女生的道歉信
2014/01/08 职场文书
精彩的英文自荐信
2014/01/30 职场文书
英语教育专业自荐信
2014/05/29 职场文书
逃课检讨书范文
2015/05/06 职场文书
2016继续教育研修日志
2015/11/13 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript