How I determine browser and its version using JavaScript?
When you are developing a site and your target audience is too large, you may need to test and cover all browsers. Your application should be consistence across all different browsers and different versions. Some time you may need to fix any issue on specific browser. In this tutorial i am giving a small Java Script code snippets that detect client browser and its version.
Detect Browser in JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ var isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS; var output = '<h1>Detecting browsers using ducktyping:</h1><hr>'; output += 'is browser Firefox: ' + isFirefox + '<br>'; output += 'is browser Chrome: ' + isChrome + '<br>'; output += 'is browser Safari: ' + isSafari + '<br>'; output += 'is browser Opera: ' + isOpera + '<br>'; output += 'is browser IE: ' + isIE + '<br>'; output += 'is browser Edge: ' + isEdge + '<br>'; output += 'is browser Blink: ' + isBlink + '<br>'; document.body.innerHTML = output; |
Detecting browser version and its version
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* Detecting browser version */ var ouput_main = document.getElementById('output_main'); function getBrowserInfo() { var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; if(/trident/i.test(M[1])) { tem= /\brv[ :]+(\d+)/g.exec(ua) || []; return 'IE '+(tem[1] || ''); } if(M[1]=== 'Chrome') { tem= ua.match(/\b(OPR|Edge)\/(\d+)/); if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera'); } M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']; if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]); return M.join(' '); } var browserInfo = getBrowserInfo(); ouput_main.innerHTML = "<hr>You are using the browser: " + browserInfo; |
Demo:
and If you are looking for some Browser Specific CSS hack, you use below articals.
- CSS hack for Chrome
- CSS hack for Mozilla
- CSS hack for Internet Explorer and Edge
- CSS hack for iPad
- CSS hack for iPhone
[paypal-donation]