How to get Device and Browser Information using jQuery – js.device.detector

Do you want to store or display user’s Device and Browser Information If yes then in this post i am going to share a lightweight jQuery plugin called js.device.detector which help you to detect user’s Device and Browser Information like OS Name, Version or Browser Name, Version.The plugin can also discover mobile and desktop devices and a general browser support against a (pre) configured browser matrix.


Get Device and Browser Information using jQuery

Libraries

The plugin dependent on jQuery core library so include it fist then add jquery.device.detector.min.js on page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="jquery.device.detector.min.js"></script>

JS

Now write simple line of code to fetch all the available Device and Browser Information.

<script>
  
  var d = $.fn.deviceDetector;
  if (d.isDesktop()) {
    alert(
      'You are using ' +
      d.getBrowserName() +
      ' as Desktop Browser on ' +
      d.getOsName() +
      '.'
    );
  }
  console.log(d.getInfo());
  
  
  //     "browserVersion": 66,
  //     "browserName": "Google Chrome",
  //     "browserId": "chrome",
  //     "osVersion": "10_13_4",
  //     "osVersionString": "10_13_4",
  //     "osVersionCategories": {
  //         "major": 10,
  //         "minor": 13,
  //         "bugfix": 4
  
  //     "osVersionMajor": 10,
  //     "osVersionMinor": 13,
  //     "osVersionBugfix": 4,
  //     "osName": "Apple Mac OS X",
  //     "osId": "macos",
  //     "supported": true,
  //     "mobile": false,
  //     "desktop": true,
  //     "safari": false,
  //     "iphone": false,
  //     "ipad": false,
  //     "ios": false,
  //     "macos": true,
  //     "chrome": true,
  //     "android": false,
  //     "firefox": false,
  //     "ie": false,
  //     "msie": false,
  //     "edge": false,
  //     "ieMobile": false,
  //     "windowsPhone": false,
  //     "windows": false,
  //     "opera": false,
  //     "operaMini": false,
  //     "blackberry": false,
  //     "linux": false,
  //     "bsd": false
  
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.