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>
  // init
  var d = $.fn.deviceDetector;
  if (d.isDesktop()) {
    alert(
      'You are using ' +
      d.getBrowserName() +
      ' as Desktop Browser on ' +
      d.getOsName() +
      '.'
    );
  }
  console.log(d.getInfo());
  // return
  // {
  //     "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.


One Reply to “How to get Device and Browser Information using jQuery – js.device.detector”

  1. Dear Rohit,

    I have seen your website. You create awesome ideas for web development.

    I would like to share my ideas with you. I am developing a phonegap app. Half of the work has been done. Would you like to become partner to give it final touch and some creative work.
    I shall be glad to hear from you soon. Thank you.

    Sumeet saini

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.