What is the user-agent

The user-Agent header contains a character string that allows the peer end of the network protocol to identify the application type, operating system, software developer, and version number of the user-agent software that initiates the request –MDN

User-agent Common format

Open the chrome console, input window. The navigator. UserAgent

// Mobile Emulator Mode Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, Like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 // Normal Mode Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36Copy the code

You can see the format of the user-agent.

Mozilla/5.0 (Platform information) Engine version Type and version of the browserCopy the code

Mozilla / 5.0

Check out this question from Zhihu about Mozilla

Why do user-agents in all major browsers start with Mozilla/ X. 0?

Information platform

It is a string of characters separated by semicolons (;) to indicate the system information

Common Platform Information

// Windows Windows NT 10.0 // For example Windows 10 Win64; x64 // Win64 on x64
WOW64 // Win32 on x64
Copy the code
// Linux X11; Linux i686; // Linux desktop, i686Copy the code
// Mac
Macintosh; Intel Mac OS X 10_9_0 // Intel x86 或者 x86_64
Copy the code
// Android, such as Xiaomi Linux; U; Android 10; zh-cn; MI 9 Build/QKQ1.190825.002Copy the code
// iphone
iPhone; CPU iPhone OS 13_3_1 like Mac OS X
Copy the code
.Copy the code

So you can determine if the device type is mobile by excluding Windows, Linux, and MAC

Engine version

This part of the declaration is the browser kernel, as we all know, common browser kernel is divided into the following types:

Internet Explorer: Trident Chrome: Webkit, Chrome /Blink Firefox: Gecko Safari: Webkit Opera: PrestoCopy the code

This article is very detailed, you can refer to: mainstream browser kernel

Why are there(KHTML, like Gecko)

The kernel Webkit includes a typography engine called WebCore, which is a derivative of KHTML. Chrome wanted to get web pages written for Safari, so it decided to pretend to be Safari, which uses the WebKit rendering engine, which masquerades as KHTML, which masquerades as Gecko

Browser type and version

See below

According to theuserAgentCheck the browser type and version

PC or mobile

According to userAgent’s device information, excluding Windows, Linux and MAC, the rest is mobile devices. For mobile devices, the regex is used to determine Iphone or Android

PC Browser Type

reference

Browser Type Matching keywords
IE 10 and below /msie ([\d\.]+)/
IE 11 or above /rv:([\d.]+) like Gecko/
edge /edge\/([\d\.]+)/
Firefox /firefox\/([\d\.]+)/
Opera / (? :opera|opr).([\d\.]+)/
chrome /chrome\/([\d\.]+)/
safari /version\/([\d\.]+).*safari/

code

Obtain the version and model

function getExplore(){ var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] : (s = ua.match(/msie ([\d\.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/edge\/([\d\.]+)/)) ? Sys.edge = s[1] : (s = ua.match(/firefox\/([\d\.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/(? :opera|opr).([\d\.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/chrome\/([\d\.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/version\/([\d\.]+).*safari/)) ? Sys.safari = s[1] : 0; // Make a judgment based on the relationshipif (Sys.ie) return ('IE: ' + Sys.ie);  
  if (Sys.edge) return ('EDGE: ' + Sys.edge);
  if (Sys.firefox) return ('Firefox: ' + Sys.firefox);  
  if (Sys.chrome) return ('Chrome: ' + Sys.chrome);  
  if (Sys.opera) return ('Opera: ' + Sys.opera);  
  if (Sys.safari) return ('Safari: ' + Sys.safari);
  return 'Unkonwn';
}
Copy the code

It’s a matter of differentiating between mobile browsers

Look at this library uA-Device