The possible reason could be code compatibility issues or intentionally executing a certain piece of code for certain devices only.
There are a lot of browsers in the market such as Firefox, Safari, Chrome, Internet Explorer, etc. This means that there is no guarantee that your code is going to work on all of these browsers without any issue.
Also, you may encounter a situation where you would like to run a certain piece of code only in mobile-specific browsers and another piece of code only in desktop-specific browsers. This logic essentially requires a browser, device, and OS detection.
Creating a solution for such a problem from scratch is not easy and that is why we are going to take advantage of third-party libraries such as Detect JS.
This library contains a bunch of helpful methods that will help us not only in detecting the name of the browser but also the OS and device type. To learn more about it, please do check out its github repo.
In the following example, we are going to display device type, browser and, and OS name when the browser is completely loaded. Please have a look over the code example and the steps given below.
HTML & CSS
We have multiple div elements with different ids. We will display OS, browser, and device details in them with the help of innerText property.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have downloaded Detect JS minified version and included it at the bottom of the HTML file using the script tag.