JavaScript is the main language of front-end development. We can judge the type and version of the browser by writing JavaScript programs. There are generally two ways to judge browser types in JavaScript. One is to distinguish them based on the unique attributes of various browsers, and the other is to judge by analyzing the browser's userAgent attribute. This article analyzes the characteristics of the browser's respective userAgent and gives a judgment method:
Windows operating system browser series:
IE browser series:
Characteristics: All start with "mozilla/", and x in "msie x.0;" represents its version;
Judgment method: You can only search the "msie x.0;" string for rough judgment. You can search the "mozilla/x.0 (compatible; msie x.0; windows nt", but this is generally not necessary.
Firefox for Windows:
Features: Start with "mozilla/x.0", including "windows nt", "gecko/" and "firefox/";
Judgment method: For rough judgment, you can only retrieve the "firefox/" and "windows nt" strings. For strict judgment, you can retrieve the four strings: "mozilla/", "windows nt", "gecko/" and "firefox/";
Chrome for Windows:
Features: Start with "mozilla/x.0", including "windows nt", "chrome/", and also include "applewebkit/", "safari/";
Judgment method: roughly judge, you can only search "windows nt" and "chrome/" strings, and strictly judge, you can search "mozilla/", "windows nt", "applewebkit/", "safari/", "chrome/" 5 strings;
Opera for Windows:
Characteristics: Start with "opera/" and contains "windows nt", "presto/" strings;
Judgment method: roughly judge only searching for "windows nt" and "opera/" strings, and strictly judge searching for "opera/", "windows nt" and "presto/" at the same time;
Safari for Windows:
Characteristics: Start with "mozilla/" and contain "windows nt", "applewebkit/", "safari/";
Judgment method: roughly judge, you can search for "windows nt", "safari/" and not "chrome/". Strictly judge, you need to include "mozilla/", "windows nt", "applewebkit/", "safari/" but "chrome/" is not included;
Summary: The browser userAgent on the Windows operating system contains "windows nt" string to represent the Windows operating system.
iPhone platform browser series:
iPhone comes with safari:
Characteristics: Starting with "mozilla/", contains the "iphone" string, and also contains the "mobile/", "safari/" string;
Judgment method: roughly judge only searching for "iphone" and "safari/" strings. Strictly judge it must include four strings: "mozilla/", "iphone", "mobile/", "safari/" at the same time.
Opera Mobile for iPhone:
Characteristics: Starting with "opera/", contains the "iphone" string, and also contains the "opera mini/", "presto/" string;
Judgment method: roughly judge only searches for "iphone" and "opera/" strings. Strictly judges must include both "opera/", "iphone", "opera mini/", "presto/" four strings
Summary: The browser userAgent on iPhone phones contains the "iphone" string
Android platform browser series:
Android comes with a browser (some people say it's just Chrome, but Google doesn't make any statements and is developing a Chrome to Phone running on Android):
Characteristics: Starting with "mozilla/", contains "android" and "linux" strings, and also contains "applewebkit/", "mobile safari/" strings;
Judgment method: Because I don’t know if there will be independent safari on Android in the future (I guess it won’t), it is recommended to make strict judgments directly and search for "mozilla/","android","linux","applewebkit/"," mobile safari/"five strings
Opera Mobile for Android:
Characteristics: Starting with "opera/", contains "android" and "linux" strings, and also contains "opera mobi/", "presto/" strings;
Judgment method: roughly judge only searches "android" and "opera/", and strictly judges must include both "opera/", "android", "linux", "opera mobi/", "presto/" five strings
Firefox for Android:
Characteristics: Starting with "mozilla/", containing "android" and "linux" strings, and also containing "firefox/", "gecko/", "fennec/" strings;
Judgment method: roughly judge only searches "android" and "firefox/", and strictly judges must include both "mozilla/", "android", "linux", "firefox/", "gecko/", "fennec/" six A string
Summary: The browser userAgent on the Android platform contains "android" and "linux" strings
The above analysis of the mainstream browsers of the three major platforms of Windows, iPhone and Android has basically ended. The Linux of other platforms is estimated to be at least similar to the Android platform, while the iPad and Mac OS that use Mac OS should be similar to the iPhone platform, so for the time being I won’t do the analysis for now, because I don’t have so many devices and operating systems to test, I hope I can make up for it in the future.
The current website product development requirements are different from before, because it not only needs to meet the computer browsing, but also needs to meet users' smart phones (here we only refer to real smartphones such as iPhone, Android, Windows Phone, and niches such as blackberry and palm The semi-intelligent system is not considered for the time being. As for the pseudo-intelligent system of symbian, let’s play with it.) Through the above three representative platforms, it can be roughly inferred that the solution to judge the user equipment based on the browser userAgent.
1. If you need to judge the operating system, the method is relatively simple. Search the following string in userAgent:
Contains "windows nt": It is obvious that the version number after nt can determine the OS version;
Systems containing "mac": Apple's Mac OS X or other Mac OS kernels;
Contains "iphone": exclusive to Apple iPhone phones, and should also contain "mac" in general;
Contains "ipad": Apple iPad tablet (the information shows that the iPad browser userAgent also contains "mac", "iphone", "ipad");
Contains "linux": Linux operating system or other operating system with linux as the kernel;
Contains "android": Google's Android operating system may be a smartphone or an Android version of tablet. Generally speaking, userAgent on the Android platform should also include "linux";
It contains one of the three: Unix system, but in fact, the user experience issues of this system are almost unnecessary to consider;
Linux containing "ubuntu": ubuntu customized version
...
You have also seen that judging the operating system and its version is not always useful, but there are always places that can be used, such as developing pages that specifically target the screen resolution of devices such as iPhone, iPad, and Android, etc.
2. It is not difficult to judge the kernel of the browser. What I figured out by myself may not be correct:
IE (Trident) kernel (IE for Mac, IEs4Linux, etc., only consider Windows): start with "mozilla/" and contains "windows nt" and "msie" strings;
Firefox (Gecko) kernel: start with "mozilla/", contains the "firefox/" and "gecko/" strings, among which the Android version also has the "fennec/" string;
Opera() kernel: starts with "opera/" and contains the "presto/" string, the iPhone version also has "opera mini/", and the Android version also has "opera mobi/";
Webkit kernel: Start with "mozilla/", contains the strings of "applewebkit/" and "safari/", and the Chrome browser with "chrome/" is the one without Safari or others;
The above is the main browser kernel
The browser kernel is the key problem in solving compatibility. However, this compatibility problem has been solved by frameworks such as jQuery and Extjs. Therefore, this judgment is only for individual pages. When the rendering effect of different kernels is different. When using it, of course, the same kernel renders the results on different devices such as smartphones and computers, and this also needs to be paid attention to.
3. Examples of the actual application of the browser useAgent:
Different browser kernels have different rendering effects on pages. Although jQuery and Extjs have already been compatible for us, there are still some small differences that need to be handled separately. At this time, we need to judge the browser kernel;
Users do not only access websites through computers. With the increasing popularity of smartphones and the popularity of tablets, the proportion of using these two to access the Internet is getting higher and higher. What should I do? The tablet is fine, the screen has a large and high resolution. The smartphone is limited by its screen size and resolution. Although it has strong processing power, it can perfectly support existing websites, but it will not hurt to think more about customers. Are you right? After all, it is very uncomfortable to watch web pages through local zooming and dragging. At this time, we can provide a dedicated version for narrow screens such as iPhone and Android to layout, which will improve the browsing experience and reduce network traffic. , speed up access;
Do visitor traffic analysis, optimize and design your own website by judging the type of customer browser and recording the number of customers to improve their customer experience separately
The code copy is as follows:
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([/d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox//([/d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome//([/d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([/d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version//([/d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//The following tests
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
or:
Methods for detecting browsers in the KindEditor open source editor source code:
KE = {};
KE.browser = (function () {
var ua = navigator.userAgent.toLowerCase();
return {
VERSION:ua.match(/(msie|firefox|webkit|opera)[//:/s](/d+)/) ? RegExp.$2 : "0",
IE:(ua.indexOf("msie") > -1 && ua.indexOf("opera") == -1),
GECKO:(ua.indexOf("gecko") > -1 && ua.indexOf("khtml") == -1),
WEBKIT:(ua.indexOf("applewebkit") > -1),
OPERA:(ua.indexOf("opera") > -1)
};
})();