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 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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 Memcached应用实现代码
2010/02/08 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python深入学习之内存管理
2014/08/31 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python 反向输出字符串的方法
2018/07/16 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python远程方法调用实现过程解析
2020/07/28 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
若干个Java基础面试题
2015/05/19 面试题
美容师的职业规划书
2013/12/27 职场文书
竞选班长演讲稿
2013/12/30 职场文书
大学生求职计划书
2014/04/30 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python