{"id":205,"date":"2021-03-21T11:48:21","date_gmt":"2021-03-21T11:48:21","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=205"},"modified":"2021-03-21T11:48:22","modified_gmt":"2021-03-21T11:48:22","slug":"javascript-browser-detection-navigator-user-agent-sniffing-guide","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/javascript-browser-detection-navigator-user-agent-sniffing-guide\/","title":{"rendered":"Javascript Browser Detection &#8211; Navigator User Agent Sniffing Guide"},"content":{"rendered":"\n<p>Javascript browser detection can be useful. This is called user agent sniffing. \u00a0jQuery had the function \u201c<a rel=\"noreferrer noopener\" href=\"http:\/\/api.jquery.com\/jQuery.browser\/\" target=\"_blank\">.browser<\/a>\u201d which would detect the users browser, but it was removed in jQuery version 1.9. They now recommend \u201c<a rel=\"noreferrer noopener\" href=\"http:\/\/api.jquery.com\/jQuery.support\/\" target=\"_blank\">.support<\/a>\u201d for browser feature detection.<\/p>\n\n\n\n<p><em>*using navigator.userAgent can make you vulnerable to spoofing. &nbsp;It is considered poor practice. Here is a lengthy&nbsp;<a href=\"http:\/\/jibbering.com\/faq\/notes\/detect-browser\/\" target=\"_blank\" rel=\"noreferrer noopener\">article<\/a>.<\/em><\/p>\n\n\n\n<p>Here\u2019s how anyway.<\/p>\n\n\n\n<p><em>*note &#8211; &nbsp;\u201dua\u201d is storing navigator.userAgent. Notice when run in chrome it may say it\u2019s chrome, then that it is safari.<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var ua = navigator.userAgent;\n        var msie = false;\n        var ff = false;\n        var chrome = false;\n \n        \/\/Javascript Browser Detection - Internet Explorer\n        if (\/MSIE (\\d+\\.\\d+);\/.test(ua)) \/\/test for MSIE x.x; True or False\n        {\n            var msie = (\/MSIE (\\d+\\.\\d+);\/.test(ua)); \/\/True or False\n            var ieversion = new Number(RegExp.$1); \/\/gets browser version\n            alert(\"ie: \" + msie + ' version:' + ieversion);\n        }\n \n        \/\/Javascript Browser Detection - FireFox\n        if (\/Firefox&#91;\\\/\\s](\\d+\\.\\d+)\/.test(navigator.ua))\/\/test for Firefox\/x.x or Firefox x.x\n        {\n            var ff = (\/Firefox&#91;\\\/\\s](\\d+\\.\\d+)\/.test(navigator.ua)); \/\/True or False\n            var ffversion = new Number(RegExp.$1) \/\/gets browser version\n            alert(\"FF: \" + ff + ' version:' + ieversion);\n        }\n \n        \/\/Javascript Browser Detection - Chrome\n        if (ua.lastIndexOf('Chrome\/') > 0) {\n            var version = ua.substr(ua.lastIndexOf('Chrome\/') + 7, 2);\n            alert(\"chrome \" + version);\n        }\n \n        \/\/Javascript Browser Detection - Safari\n        if (ua.lastIndexOf('Safari\/') > 0) {\n            var version = ua.substr(ua.lastIndexOf('Safari\/') + 7, 2);\n            alert(\"Safari \" + version);\n        }\n \n        \/\/Javascript Browser Detection - Android\n        if (ua.indexOf(\"Android\") >= 0) {\n            var androidversion = parseFloat(ua.slice(ua.indexOf(\"Android\") + 8));\n            if (androidversion &lt; 2.3) {\n                \/\/ do whatever\n                alert(\"This older version of Android has some issues with CSS\");\n            }\n        }\n \n        \/\/Javascript Browser Detection - Mobile\n        if (\/Android|webOS|iPhone|iPad|iPod|BlackBerry\/i.test(ua)) {\n \n            \/\/ Check if the orientation has changed 90 degrees or -90 degrees... or 0\n            window.addEventListener(\"orientationchange\", function () {\n                alert(window.orientation);\n            });\n        }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Javascript Browser Detection for Mobile<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/Detect if browser is mobile\n        if (\/Android|webOS|iPhone|iPad|iPod|BlackBerry\/i.test(ua)) {\n \n            \/\/ Check if the orientation has changed 90 degrees or -90 degrees\n            window.addEventListener(\"orientationchange\", function () {\n                alert(window.orientation);\n            });\n        }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Javascript Browser Detection &#8211; All the Code<\/h2>\n\n\n\n<p>Below is all code for Javascript browser detection. Hopefully i will make it easy for you to copy and paste.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n&lt;head>\n    &lt;title>&lt;\/title>\n&lt;script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\">&lt;\/script>\n&lt;script type=\"text\/javascript\">\n    $(document).ready(function () {\n \n        var ua = navigator.userAgent;\n        var msie = false;\n        var ff = false;\n        var chrome = false;\n \n        \/\/Javascript Browser Detection - Internet Explorer\n        if (\/MSIE (\\d+\\.\\d+);\/.test(ua)) \/\/test for MSIE x.x; True or False\n        {\n            var msie = (\/MSIE (\\d+\\.\\d+);\/.test(ua)); \/\/True or False\n            var ieversion = new Number(RegExp.$1); \/\/gets browser version\n            alert(\"ie: \" + msie + ' version:' + ieversion);\n        }\n \n        \/\/Javascript Browser Detection - FireFox\n        if (\/Firefox&#91;\\\/\\s](\\d+\\.\\d+)\/.test(navigator.ua))\/\/test for Firefox\/x.x or Firefox x.x\n        {\n            var ff = (\/Firefox&#91;\\\/\\s](\\d+\\.\\d+)\/.test(navigator.ua)); \/\/True or False\n            var ffversion = new Number(RegExp.$1) \/\/gets browser version\n            alert(\"FF: \" + ff + ' version:' + ieversion);\n        }\n \n        \/\/Javascript Browser Detection - Chrome\n        if (ua.lastIndexOf('Chrome\/') > 0) {\n            var version = ua.substr(ua.lastIndexOf('Chrome\/') + 7, 2);\n            alert(\"chrome \" + version);\n        }\n \n        \/\/Javascript Browser Detection - Safari\n        if (ua.lastIndexOf('Safari\/') > 0) {\n            var version = ua.substr(ua.lastIndexOf('Safari\/') + 7, 2);\n            alert(\"Safari \" + version);\n        }\n \n        \/\/Javascript Browser Detection - Android\n        if (ua.indexOf(\"Android\") >= 0) {\n            var androidversion = parseFloat(ua.slice(ua.indexOf(\"Android\") + 8));\n            if (androidversion &lt; 2.3) {\n                \/\/ do whatever\n                alert(\"This older version of Android has some issues with CSS\");\n            }\n        }\n \n        \/\/Javascript Browser Detection - Mobile\n        if (\/Android|webOS|iPhone|iPad|iPod|BlackBerry\/i.test(ua)) {\n \n            \/\/ Check if the orientation has changed 90 degrees or -90 degrees... or 0\n            window.addEventListener(\"orientationchange\", function () {\n                alert(window.orientation);\n            });\n        }\n \n    });\n&lt;\/script>\n \n&lt;\/head>\n&lt;body>\nThis is a blank page.\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Javascript browser detection can be useful. This is called user agent sniffing. \u00a0jQuery had the function \u201c.browser\u201d which would detect the users browser, but it was removed in jQuery version 1.9. They now recommend \u201c.support\u201d for browser feature detection. *using navigator.userAgent can make you vulnerable to spoofing. &nbsp;It is considered poor practice. Here is a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-205","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":1,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/205\/revisions\/207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/206"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}