The browser is probably the most familiar tool for us. In addition to the well-known browsers Firefox, Opera, Safari, IE, and Chrome, it is said that there are nearly a hundred browsers in the world. Usually when developing, it is necessary to be compatible with various browsers, so it is important to refine the judgment of browser type and system. Let’s first take a look at what User-Agent is? User-Agent is the user identifier in the HTTP request, which usually sends a string that can represent the client type, such as browser type, operating system and other information. The agreed format of User-Agent is: application name, followed by a slash, followed by the version number, and the rest is in free format. Here I only show a few browsers Chrome Safari for iPhone IE Next, we encapsulate the function of obtaining the browsing type and system, and then call it where needed. // All major browsers function getBrowser() { var u = navigator.userAgent; var bws = [{ name: 'sgssapp', it: /sogousearch/i.test(u) }, { name: 'wechat', it: /MicroMessenger/i.test(u) }, { name: 'weibo', it: !!u.match(/Weibo/i) }, { name: 'uc', it: !!u.match(/UCBrowser/i) || u.indexOf(' UBrowser') > -1 }, { name: 'sogou', it: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1 }, { name: 'xiaomi', it: u.indexOf('MiuiBrowser') > -1 }, { name: 'baidu', it: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1 }, { name: '360', it: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1 }, { name: '2345', it: u.indexOf('2345Explorer') > -1 }, { name: 'edge', it: u.indexOf('Edge') > -1 }, { name: 'ie11', it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1 }, { name: 'ie', it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1 }, { name: 'firefox', it: u.indexOf('Firefox') > -1 }, { name: 'safari', it: u.indexOf('Safari') > -1 && u.indexOf('Chrome') === -1 }, { name: 'qqbrowser', it: u.indexOf('MQQBrowser') > -1 && u.indexOf(' QQ') === -1 }, { name: 'qq', it: u.indexOf('QQ') > -1 }, { name: 'chrome', it: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1 }, { name: 'opera', it: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1 }]; for (var i = 0; i < bws.length; i++) { if (bws[i].it) { return bws[i].name; } } return 'other'; } // System differentiation function getOS() { var u = navigator.userAgent; if (!!u.match(/compatible/i) || u.match(/Windows/i)) { return 'windows'; } else if (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) { return 'macOS'; } else if (!!u.match(/iphone/i) || u.match(/Ipad/i)) { return 'ios'; } else if (!!u.match(/android/i)) { return 'android'; } else { return 'other'; } } This is the end of this article about the case study of JavaScript navigator.userAgent obtaining browser information. For more relevant content about JavaScript navigator.userAgent obtaining browser information, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of ensuring the consistency of MySQL views (with check option)
>>: Solution to nginx-ingress-controller log persistence solution
1. First stop the mysql service As an administrat...
The reason for writing such an article is that on...
principle Set a shadow on the element when hoveri...
Table of contents Common payment methods in proje...
Table of contents Introduction The following is a...
Dynamic rem 1. First, let’s introduce the current...
Next, I will create two tables and execute a seri...
Simple example of HTML checkbox and radio style b...
This article shares the specific code of JS canva...
ylbtech_html_print HTML print code, support page t...
As front-end engineers, IE must be familiar to us...
1. Vector Map Vector graphics use straight lines ...
Table of contents 1. Array flattening (also known...
Readonly and Disabled both prevent users from cha...
Most people have heard of the concept of server-s...