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>
