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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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分页代码实例
2013/10/24 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
python实现八大排序算法(1)
2017/09/14 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
Python实现最常见加密方式详解
2019/07/13 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
python with语句的原理与用法详解
2020/03/30 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
什么是索引指示器
2012/08/20 面试题
党支部综合考察材料
2014/05/19 职场文书
学校消防安全责任书
2014/07/23 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
导师鉴定意见
2015/06/05 职场文书
房产遗嘱范本
2015/08/06 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
SpringBoot 集成Redis 过程
2021/06/02 Redis
JVM之方法返回地址详解
2022/02/28 Java/Android