In this article I will explain with an example, how to detect Browser details such as Name, Version, Platform, OS, Mobile or Desktop in JavaScript using jQuery.
The jQuery Browser Plugin will be used along with jQuery to detect the Browser details such as Name, Version, Platform, OS, Mobile or Desktop on Client Side in JavaScript.
Detecting Browser Name, Version, Platform, OS, Mobile or Desktop in JavaScript using jQuery
Inside the document ready event handler, the details of the Browser are detected using jQuery Browser Plugin.
The Browser details are available in the following properties of the $.browser object of the jQuery Browser Plugin.
Desktop: True if the Browser is of a Desktop device.
Mobile: True if the Browser is of a Mobile device.
Browser Name: Name of the Browser. Example msie for Internet Explorer and mozilla for FireFox.
Browser Platform: Platform of the Browser. Example win for Windows and android for Android.
Browser Version: Exact Version of the Browser.
Browser Version Number: Version number of the Browser.
Windows OS: True is the Operation System is Windows.
WebKit: True if the Browser is WebKit.
Mozilla: True if the Browser is Mozilla.
Internet Explorer: True if the Browser is Internet Explorer.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
<script type="text/javascript">
$(function () {
var browserDetails = "<u>Desktop</u>: " + $.browser.desktop + "<br />";
browserDetails += "<u>Mobile</u>: " + $.browser.mobile + "<br />";
browserDetails += "<u>Browser Name</u>: " + $.browser.name + "<br />";
browserDetails += "<u>Browser Platform</u>: " + $.browser.platform + "<br />";
browserDetails += "<u>Browser Version</u>: " + $.browser.version + "<br />";
browserDetails += "<u>Browser Version Number</u>: " + $.browser.versionNumber + "<br />";
browserDetails += "<u>Windows OS</u>: " + $.browser.win + "<br />";
browserDetails += "<u>WebKit</u>: " + $.browser.webkit + "<br />";
browserDetails += "<u>Mozilla</u>: " + $.browser.mozilla + "<br />";
browserDetails += "<u>Internet Explorer</u>: " + $.browser.msie + "<br />";
$("#dvBrowserDetails").html(browserDetails);
});
</script>
<div id="dvBrowserDetails"></div>
Screenshots
Internet Explorer in Windows
Mozilla FireFox in Windows
Google Chrome in Android
Demo
Downloads