JavaScript Get Browser Name and Version

by
JavaScript Get Browser Name and Version
Code Snippet:JavaScript | Detect Browser
Author: Stefan Natter
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 981
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (File not found!)

If you’re wondering how to detect the browser name and version using JavaScript, you’ve come to the right place. This code provides valuable insights into your user’s browser and device.

This code helps you gain insights into your users’ devices and browsers, which can be useful for tailoring your web applications accordingly. It helps you tailor your web content and features for a better user experience. Moreover, it also supports compatibility checks for Chrome and Firefox, ensuring a smoother browsing experience.

How to Get the Browser Name And Version Using JavaScript

1. First, create an HTML file for your project. Inside the <body> tag, add the following code:

  1. <div class="max-w-lg my-0 mx-auto">
  2.   <h1 class="text-2xl mb-4 underline">Detect Browser</h1>
  3.  
  4.   <div class="result">
  5.     <h2 class="text-1xl my-4 italic underline">Navigator</h2>
  6.     <p class="my-1"><span class="font-bold">userAgent:</span> <span id="useragent">-</span></p>
  7.     <p class="my-1"><span class="font-bold">appVersion:</span> <span id="appVersion">-</span></p>
  8.     <p class="my-1"><span class="font-bold">platform:</span> <span id="platform">-</span></p>
  9.     <p class="my-1"><span class="font-bold">vendor:</span> <span id="vendor">-</span></p>
  10.  
  11.     <h2 class="text-1xl my-4 italic underline">Feature Detection</h2>
  12.     <p class="my-1"><span class="font-bold">Apple OS:</span> <span id="AppleOS">-</span></p>
  13.     <p class="my-1"><span class="font-bold">Apple Device:</span> <span id="AppleDevice">-</span></p>
  14.     <p class="my-1"><span class="font-bold">Device Detection:</span> <span id="DeviceDetection">-</span></p>
  15.     <p class="my-1"><span class="font-bold">Browser:</span> <span id="Browser">-</span></p>
  16.     <p class="my-1"><span class="font-bold">iOS Version:</span> <span id="iOSVersion">-</span></p>
  17.   </div>
  18.  
  19.   <div class="m-16 text-xs text-center underline"><a href="https://linktr.ee/natterstefan" target="_blank">made with <span aria-label="a red heart" role="img">❤️</span> by @natterstefan</a></div>
  20. </div>

2. You can customize the styling of the HTML elements using the provided CSS code in the original code snippet. Copy the CSS and include it in a <style> tag in the HTML file, or link it externally. (Optional)

  1. body {
  2.   margin: 1.75rem;
  3.   background: #efefef;
  4. }

3. The JavaScript code contains several functions that help detect browser information. Here’s a quick overview of each function’s purpose:

  • detectIosVersion(): Detects the iOS version.
  • detectAppleOs(): Identifies the user’s OS (macOS or iOS).
  • detectIosDevices(): Detects Apple devices.
  • detectDevice(): Distinguishes between iPhones, iPads, and desktops.
  • detectChrome(): Checks if the user’s browser is Chrome.
  • detectFirefox(): Detects Firefox.
  • detectBrowser(): Combines the above functions to identify the user’s browser.

Insert the JavaScript code just before the closing </body> tag in your HTML file:

  1. /**
  2.  * # Detect Current Apple Device (macOS or iOS) and Browser
  3.  * (Chrome or not Chrome)
  4.  *
  5.  * Misc Notes
  6.  * - https://github.com/DamonOehlman/detect-browser (not tested)
  7.  */
  8.  
  9. /**
  10.  * The problem with > iOS 13 in general is that it mimics the user agent of Macs.
  11.  * Therefore it is difficult to get the correct iOS Version >= 13.
  12.  * @see https://stackoverflow.com/a/57838385/1238150
  13.  *
  14.  * inspired by
  15.  * @see https://codepen.io/niggi/pen/DtIfy
  16.  */
  17. function detectIosVersion() {
  18.   if (/iP(hone|od|ad)/.test(navigator.platform)) {
  19.     var v = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
  20.  
  21.     const result = [
  22.       parseInt(v[1], 10),
  23.       parseInt(v[2], 10),
  24.       parseInt(v[3] || 0, 10)
  25.     ].join(".");
  26.  
  27.     return result;
  28.   }
  29.  
  30.   return "-";
  31. }
  32.  
  33. /**
  34.  * Detect Apple OS by testing if `window.ontouchstart` exists
  35.  *
  36.  * @see https://stackoverflow.com/q/58019463/1238150
  37.  *
  38.  * Alternatives
  39.  * - https://stackoverflow.com/a/57654258/1238150 (with `TouchEvent`)
  40.  * - https://stackoverflow.com/a/60553965/1238150 (with `Canvas`)
  41.  */
  42. function detectAppleOs() {
  43.   if (/Safari[\/\s](\d+\.\d+)/.test(window.navigator.userAgent)) {
  44.     return "ontouchstart" in window ? "iOS" : "macOS";
  45.   }
  46.  
  47.   if (window.navigator.platform === "MacIntel") {
  48.     return "macOS";
  49.   }
  50.  
  51.   return "No Apple Device";
  52. }
  53.  
  54. /**
  55.  * Apple Device detection with >iOS13 support
  56.  *
  57.  * What is `navigator.standalone`?
  58.  * > Returns a boolean indicating whether the browser is running in standalone mode.
  59.  * > Available on Apple's iOS Safari only.
  60.  * > (https://developer.mozilla.org/de/docs/Web/API/Navigator)
  61.  *
  62.  * @see https://stackoverflow.com/a/62980780/1238150
  63.  * @see https://racase.com.np/javascript-how-to-detect-if-device-is-ios/
  64.  *
  65.  * Misc:
  66.  * - detect if site is running in standalone (added to home screen):
  67.  *   https://stackoverflow.com/a/40932368/1238150
  68. ^ */
  69. function detectIosDevices() {
  70.   // devices prior to iOS 13
  71.   if (/iPad|iPhone|iPod/.test(navigator.platform)) {
  72.     return navigator.platform;
  73.   }
  74.  
  75.   // or with document.createEvent('TouchEvent'), which is only available on iPads (and iPhones)
  76.   return !!(
  77.     navigator.platform === "MacIntel" &&
  78.     typeof navigator.standalone !== "undefined"
  79.   )
  80.     ? "iPad"
  81.     : navigator.platform === "MacIntel"
  82.     ? "Macbook"
  83.     : "No Apple Device";
  84. }
  85.  
  86. /**
  87.  * Detects iPhone, iPad and Desktop computer
  88.  *
  89.  * inspired by
  90.  * @see https://stackoverflow.com/a/59016446/1238150 (Nov. 2019)
  91.  */
  92. function detectDevice() {
  93.   var agent = window.navigator.userAgent;
  94.  
  95.   // iPhone
  96.   IsIPhone = agent.match(/iPhone/i) != null;
  97.  
  98.   // iPad up to IOS12
  99.   IsIPad = agent.match(/iPad/i) != null;
  100.  
  101.   if (IsIPad) {
  102.     IsIPhone = false;
  103.   }
  104.  
  105.   // iPad from IOS13
  106.   var macApp = agent.match(/Macintosh/i) != null;
  107.  
  108.   // also used in https://stackoverflow.com/a/60553965/1238150
  109.   if (macApp) {
  110.     // need to distinguish between Macbook and iPad
  111.     var canvas = document.createElement("canvas");
  112.     if (canvas != null) {
  113.       var context =
  114.         canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  115.       if (context) {
  116.         var info = context.getExtension("WEBGL_debug_renderer_info");
  117.         if (info) {
  118.           var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
  119.           if (renderer.indexOf("Apple") != -1) {
  120.             IsIPad = true;
  121.           }
  122.         }
  123.       }
  124.     }
  125.   }
  126.  
  127.   if (IsIPhone) {
  128.     return "iPhone";
  129.   } else if (IsIPad) {
  130.     return "iPad";
  131.   } else {
  132.     // right now we do not distinguish between the two of them
  133.     return "Desktop computer";
  134.   }
  135. }
  136.  
  137. /**
  138.  * Detects if current Browser is Chrome. Also works on iOS devices.
  139.  */
  140. function detectChrome() {
  141.   // http://browserhacks.com/
  142.   // https://stackoverflow.com/a/9851769/1238150
  143.   const isChrome =
  144.     !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
  145.  
  146.   // https://stackoverflow.com/a/37178303/1238150
  147.   return /Chrome|CriOS/i.test(navigator.userAgent) || isChrome;
  148. }
  149.  
  150. function detectFirefox() {
  151.   return /Firefox|FxiOS/i.test(navigator.userAgent);
  152. }
  153.  
  154. function detectBrowser() {
  155.   if (detectChrome()) {
  156.     return "Chrome";
  157.   }
  158.   if (detectFirefox()) {
  159.     return "Firefox";
  160.   }
  161.  
  162.   // Attention: catchall-fallback with no guarantee
  163.   return "Safari";
  164. }
  165.  
  166. // DOMContentLoaded
  167. // @see https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  168. document.addEventListener("DOMContentLoaded", function () {
  169.   // navigator
  170.   document.getElementById("useragent").innerText = navigator.userAgent || "-";
  171.   document.getElementById("platform").innerText = navigator.platform || "-";
  172.   document.getElementById("appVersion").innerText = navigator.appVersion || "-";
  173.   document.getElementById("vendor").innerText = navigator.vendor || "-";
  174.  
  175.   // feature detection
  176.   document.getElementById("AppleOS").innerText = detectAppleOs();
  177.   document.getElementById("AppleDevice").innerText = detectIosDevices();
  178.   document.getElementById("DeviceDetection").innerText = detectDevice();
  179.   document.getElementById("Browser").innerText = detectBrowser();
  180.   document.getElementById("iOSVersion").innerText = detectIosVersion();
  181. });

You’ve successfully implemented JavaScript code to detect browser names and versions. This valuable data can help you optimize your website for a better user experience, ensuring compatibility with various browsers and devices. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X