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

 更新时间:2020年04月30日 09:42:45   作者:廖飞银  
这篇文章主要介绍了JS判断浏览器类型与操作系统的方法,结合实例形式分析了JS针对各种常见浏览器与操作系统进行判断的方法,需要的朋友可以参考下

本文实例讲述了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 ),

PS:这里再为大家提供几款相关在线工具供大家参考:

在线浏览器信息检测工具:
http://tools.jb51.net/aideddesign/browser_info

常用浏览器(PC,移动) user-agent:
http://tools.jb51.net/table/useragent

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • js 连续赋值的简单实现

    js 连续赋值的简单实现

    下面小编就为大家带来一篇js 连续赋值的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 微信小程序商城项目之淘宝分类入口(2)

    微信小程序商城项目之淘宝分类入口(2)

    这篇文章主要为大家详细介绍了微信小程序实战商城系列之淘宝分类入口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • layer的prompt弹出框,点击回车,触发确定事件的方法

    layer的prompt弹出框,点击回车,触发确定事件的方法

    今天小编就为大家分享一篇layer的prompt弹出框,点击回车,触发确定事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 新鲜出炉的js tips提示效果

    新鲜出炉的js tips提示效果

    提示不难做,那个三角号样式很难调兼容,死了好多脑细胞预览主窗口提示错位,保存本地测比较好。
    2011-04-04
  • JavaScript实现三级级联特效

    JavaScript实现三级级联特效

    这篇文章主要介绍了JavaScript实现三级级联特效,选择省会出现相应的县下拉框,同时市的下拉框改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JS ES新特性 扩展运算符介绍

    JS ES新特性 扩展运算符介绍

    这篇文章主要介绍了JS ES新特性 扩展运算符,下面文章围绕ES新特性 扩展运算符的相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助
    2021-12-12
  • 前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化

    前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化

    这篇文章主要介绍了前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • javascript判断两个IP地址是否在同一个网段的实现思路

    javascript判断两个IP地址是否在同一个网段的实现思路

    要判断两个IP地址是否在同一个网段,将它们的IP地址分别与子网掩码做与运算,得到的结果为网络号,具体实现如下,需要的朋友可以参考下
    2013-12-12
  • JavaScript中正则表达式判断匹配规则及常用方法

    JavaScript中正则表达式判断匹配规则及常用方法

    JS作为一门常用于web开发的语言,必然要具备正则这种强大的特性,本文将对JS中的正则用法及常用函数进行一番总结
    2017-08-08
  • 一起来了解一下JavaScript的预编译(小结)

    一起来了解一下JavaScript的预编译(小结)

    这篇文章主要介绍了一起来了解一下JavaScript的预编译(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论