Javascript browser detection can be useful. This is called user agent sniffing.  jQuery had the function “.browser” which would detect the users browser, but it was removed in jQuery version 1.9. They now recommend “.support” for browser feature detection.

*using navigator.userAgent can make you vulnerable to spoofing.  It is considered poor practice. Here is a lengthy article.

Here’s how anyway.

*note –  ”ua” is storing navigator.userAgent. Notice when run in chrome it may say it’s chrome, then that it is safari.

var ua = navigator.userAgent;
        var msie = false;
        var ff = false;
        var chrome = false;
 
        //Javascript Browser Detection - Internet Explorer
        if (/MSIE (\d+\.\d+);/.test(ua)) //test for MSIE x.x; True or False
        {
            var msie = (/MSIE (\d+\.\d+);/.test(ua)); //True or False
            var ieversion = new Number(RegExp.$1); //gets browser version
            alert("ie: " + msie + ' version:' + ieversion);
        }
 
        //Javascript Browser Detection - FireFox
        if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.ua))//test for Firefox/x.x or Firefox x.x
        {
            var ff = (/Firefox[\/\s](\d+\.\d+)/.test(navigator.ua)); //True or False
            var ffversion = new Number(RegExp.$1) //gets browser version
            alert("FF: " + ff + ' version:' + ieversion);
        }
 
        //Javascript Browser Detection - Chrome
        if (ua.lastIndexOf('Chrome/') > 0) {
            var version = ua.substr(ua.lastIndexOf('Chrome/') + 7, 2);
            alert("chrome " + version);
        }
 
        //Javascript Browser Detection - Safari
        if (ua.lastIndexOf('Safari/') > 0) {
            var version = ua.substr(ua.lastIndexOf('Safari/') + 7, 2);
            alert("Safari " + version);
        }
 
        //Javascript Browser Detection - Android
        if (ua.indexOf("Android") >= 0) {
            var androidversion = parseFloat(ua.slice(ua.indexOf("Android") + 8));
            if (androidversion < 2.3) {
                // do whatever
                alert("This older version of Android has some issues with CSS");
            }
        }
 
        //Javascript Browser Detection - Mobile
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(ua)) {
 
            // Check if the orientation has changed 90 degrees or -90 degrees... or 0
            window.addEventListener("orientationchange", function () {
                alert(window.orientation);
            });
        }

Javascript Browser Detection for Mobile

//Detect if browser is mobile
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(ua)) {
 
            // Check if the orientation has changed 90 degrees or -90 degrees
            window.addEventListener("orientationchange", function () {
                alert(window.orientation);
            });
        }

Javascript Browser Detection – All the Code

Below is all code for Javascript browser detection. Hopefully i will make it easy for you to copy and paste.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
 
        var ua = navigator.userAgent;
        var msie = false;
        var ff = false;
        var chrome = false;
 
        //Javascript Browser Detection - Internet Explorer
        if (/MSIE (\d+\.\d+);/.test(ua)) //test for MSIE x.x; True or False
        {
            var msie = (/MSIE (\d+\.\d+);/.test(ua)); //True or False
            var ieversion = new Number(RegExp.$1); //gets browser version
            alert("ie: " + msie + ' version:' + ieversion);
        }
 
        //Javascript Browser Detection - FireFox
        if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.ua))//test for Firefox/x.x or Firefox x.x
        {
            var ff = (/Firefox[\/\s](\d+\.\d+)/.test(navigator.ua)); //True or False
            var ffversion = new Number(RegExp.$1) //gets browser version
            alert("FF: " + ff + ' version:' + ieversion);
        }
 
        //Javascript Browser Detection - Chrome
        if (ua.lastIndexOf('Chrome/') > 0) {
            var version = ua.substr(ua.lastIndexOf('Chrome/') + 7, 2);
            alert("chrome " + version);
        }
 
        //Javascript Browser Detection - Safari
        if (ua.lastIndexOf('Safari/') > 0) {
            var version = ua.substr(ua.lastIndexOf('Safari/') + 7, 2);
            alert("Safari " + version);
        }
 
        //Javascript Browser Detection - Android
        if (ua.indexOf("Android") >= 0) {
            var androidversion = parseFloat(ua.slice(ua.indexOf("Android") + 8));
            if (androidversion < 2.3) {
                // do whatever
                alert("This older version of Android has some issues with CSS");
            }
        }
 
        //Javascript Browser Detection - Mobile
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(ua)) {
 
            // Check if the orientation has changed 90 degrees or -90 degrees... or 0
            window.addEventListener("orientationchange", function () {
                alert(window.orientation);
            });
        }
 
    });
</script>
 
</head>
<body>
This is a blank page.
</body>
</html>

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here