There are two methods for JavaScript to determine the browser type. One is to distinguish the browser type based on its unique attributes, the other method is to analyze the browser's userAgent attributes to determine that JavaScript is the main language for front-end development. We can compile JavaScript programs to determine the browser type and version. There are two methods to determine the browser type in JavaScript: one is to distinguish based on the unique attributes of various browsers, and the other is to judge by analyzing the userAgent attributes of the browser. This article analyzes the features of the browser's userAgent and provides the judgment method:
Windows operating system browser series:
IE browser series:
Features: all features start with "mozilla/", and "x" in "msie x.0;" indicates the version;
Method of determination: you can retrieve only the "msie x.0;" string by rough judgment, and strictly judge the searchable "mozilla/x.0 (compatibal; msie x.0; windows nt", but this is generally not necessary.
Windows Firefox:
Features: starting with "mozilla/x.0", including "windows nt", "gecko/", and "firefox /";
Method of determination: you can retrieve only the "firefox/" and "windows nt" strings, and strictly search for "mozilla/", "windows nt ", four strings: "gecko/" and "firefox;
Windows Chrome:
Features: starting with "mozilla/x.0", including "windows nt", "chrome/", and "applewebkit/", "safari /";
Method of determination: you can retrieve only the "windows nt" and "chrome/" strings, and strictly determine whether you can search for "mozilla/", "windows nt", "applewebkit /", "safari/", "chrome/" five strings;
Windows Opera:
Features: It starts with "opera/" and contains "windows nt" and "presto/" strings;
Method of determination: roughly judge to retrieve only the "windows nt" and "opera/" strings, and strictly judge to retrieve "opera/", "windows nt", and "presto/" at the same time /";
Safari for Windows:
Features: It starts with "mozilla/" and contains "windows nt", "applewebkit/", and "safari /";
Method of determination: you can retrieve "windows nt", "safari/", but not "chrome/", and strictly determine whether "mozilla/", "windows nt ", "applewebkit/", "safari/", but not "chrome /";
Summary: The browser userAgent on Windows OS contains a "windows nt" string to characterize windows OS.
IPhone platform browser series:
IPhone comes with safari:
Features: It starts with "mozilla/" and contains "iphone" strings and "mobile/" and "safari/" strings;
Method of determination: You can make a rough decision to retrieve only the "iphone" and "safari/" strings. Strict determination must include "mozilla/", "iphone", "mobile /", "safari/" four strings
IPhone Opera Mobile:
Features: It starts with "opera/" and contains "iphone" strings and "opera mini/" and "presto/" strings;
Method of determination: You can make a rough decision to retrieve only the "iphone" and "opera/" strings. Strict determination must include "opera/", "iphone", "opera mini /", "presto/" four strings
Conclusion: The browser userAgent on the iPhone contains the "iphone" string.
Android platform browser series:
Android comes with a browser (some people say it is actually chrome, but google hasn't done it, and it is still developing a Chrome to Phone running on Android ):
Features: It starts with "mozilla/" and contains "android" and "linux" strings, as well as "applewebkit/" and "mobile safari/" strings;
Method of determination: Because I still don't know whether there will be an independent safari in the future on Android (probably not), it is recommended to strictly judge and search for "mozilla/", "android ", "linux", "applewebkit/", "mobile safari/" five strings
Opera Mobile for Android:
Features: It starts with "opera/" and contains "android" and "linux" strings. It also contains "opera mobi/" and "presto/" strings;
Judgment Method: You can make a rough decision to retrieve only "android" and "opera/". Strict judgment must include "opera/", "android", "linux ", "opera mobi/", "presto/" five strings
Android Firefox:
Features: It starts with "mozilla/" and contains "android" and "linux" strings, as well as "firefox/", "gecko/", and "fennec/" strings;
Judgment Method: You can make a rough decision to retrieve only "android" and "firefox/". Strict judgment must include "mozilla/", "android", "linux", "firefox /", "gecko/", "fennec/" six strings
Summary: The browser userAgent on Android contains "android" and "linux" strings.
The above analysis of mainstream browsers on windows, iphone, and android platforms is basically over. linux on other platforms is estimated to be at least similar to that on android platforms, the Mac OS iPad and the Mac tower should be similar to the iphone platform, so we will not resolve them for the time being. We also hope that we will be able to complete the tests in the future because there are not so many devices and operating systems at hand.
The current website product development requirements are different from those before, because not only does it meet the requirements of computer browsing, it also needs to satisfy users' demands for smart phones (here, it only refers to real smart phones such as iphone, android, and windows phone, and niche half-intelligence systems such as blackberry and palm are not considered for the moment, as for the symbian pseudo-intelligent system, you can use the above three representative platforms to determine the solutions for user devices based on the browser userAgent.
1. If you need to determine the operating system, the method is relatively simple. Search the following strings in userAgent:
Contains "windows nt": Obviously, the OS version can be determined based on the version number after the windows OS and nt;
Systems with "mac": Mac OS x of Apple or other Mac OS kernels;
"Iphone": Apple's iphone is exclusive. Generally, it should also contain "mac ";
Include "ipad": Apple iPad tablet (information indicates that the iPad browser userAgent also contains "mac", "iphone", "ipad ");
Including "linux": Linux OS or other operating systems that use linux as the kernel;
"Android": Google's Android operating system may be a smartphone or an android tablet, generally, the userAgent on the android platform should also contain "linux ";
One of the three elements including "unix", "sunos", and "bsd" is the Unix system. In fact, there is almost no need to consider the user experience of this system;
Linux with "ubuntu": customized ubuntu version
......
You can also see that it is not always useful to judge the operating system and its version, but it is always useful, for example, developing a page that specifically targets the screen resolution of iphone, ipad, android, and other devices.
2. It is not difficult to judge the browser kernel. I have figured it out myself. It is not always true:
IE (Trident) kernel (IE for Mac, IEs4Linux, and so on): starts with "mozilla, contains "windows nt" and "msie" strings;
Firefox (Gecko) kernel: starts with "mozilla/" and contains the "firefox/" and "gecko/" strings. Android also contains the "fennec/" string;
Opera () kernel: It starts with "opera/" and contains "presto/" strings. iphone also carries "opera mini/" and Android also carries "opera mobi /";
Webkit kernel: starts with "mozilla/" and contains "applewebkit/" and "safari/" strings. The chrome browser contains "Chrome, safari or others are not included;
The above is the main browser kernel.
The browser kernel is the key to solving the compatibility problem. However, this compatibility problem has been solved by jQuery, Extjs, and other frameworks, therefore, this judgment only applies to the CSS styles of individual pages when rendering effects of different kernels are different. Of course, the rendering results of the same Kernel on different devices such as smartphones and computers are also different, pay attention to this.
3. Example of judging the actual application of browser useAgent:
Different browser kernels have different page rendering effects. Although jQuery and Extjs are already compatible for us, there are still some small differences that need to be processed separately, in this case, you need to determine the browser kernel;
Users do not just access websites through computers. As smartphones become increasingly popular and tablet computers become popular, the proportion of using the two to access the Internet is getting higher and higher. What should I do? The tablet is good, and the screen size and resolution are high. The smartphone is limited by its screen size and resolution. Although it has strong processing capabilities, it can also perfectly support existing websites, but there is always no harm for customers to consider more, right? After all, it is uncomfortable to view the webpage through partial scaling and drag-and-drop. In this case, we can provide a dedicated layout for narrow screens such as iphone and android to improve the browsing experience, 2. Reduce network traffic and speed up access;
Analyze visitor traffic, determine the customer's browser type, and record the number of visitors to optimize the design of your website to improve the customer experience.
The Code is as follows:
