JS analyzes the UserAgent properties to determine the browser type and version _javascript skills

JavaScript is the primary language for front-end development, and we can write JavaScript programs to determine the type and version of the browser. JavaScript can determine browser types in general there are two ways, one is based on a variety of browser-specific properties to distinguish, the other is by analyzing the browser's useragent properties to judge. This paper makes an analysis of the useragent characteristics of the browser and gives the Judgment method:

Windows operating system Browser series:

IE Browser series:
Characteristic performance: All "mozilla/" Start, "MSIE x.0" in the X represents its version;
Judgment method: Rough judgment can only search "MSIE x.0" string can be, strict judgment can be retrieved "mozilla/x.0" (Compatibal; MSIE x.0; Windows NT, but generally not necessary
Windows version Firefox:
Feature performance: "mozilla/x.0", including "Windows NT", "gecko/" and "firefox/";
Judgment method: Rough judgment can only retrieve "firefox/" and "Windows NT" string, strictly judge can retrieve "mozilla/", "Windows NT", "gecko/" and "firefox/" four strings;
Windows version Chrome:
Feature performance: "mozilla/x.0", including "Windows NT", "chrome/", including "applewebkit/", "safari/";
Judgment method: Rough judgment can retrieve only "Windows NT" and "chrome/" string, strict judgment can retrieve "mozilla/", "Windows NT", "applewebkit/", "safari/", "chrome/" Five strings;
Windows Edition Opera:
Feature performance: "Opera/" with "Windows NT", "presto/" string;
Judging method: The rough judgment retrieves only "Windows NT" and "opera/" string, strictly judges simultaneously searches "opera/", "Windows NT" and "presto/";
Windows version Safari:
Characteristic performance: "mozilla/" begins with "Windows NT", "applewebkit/", "safari/";
Judgment method: Rough judgment can be retrieved containing "Windows NT", "safari/" also does not contain "chrome/", strict judgment needs to contain "mozilla/", "Windows NT", "applewebkit/", "safari/" But does not contain "chrome/";
Summary: The browser useragent on the Windows operating system contains a "Windows NT" string to represent the Windows operating system.

iphone Platform Browser series:

iphone with Safari:
Feature performance: "mozilla/", with "iphone" string, contains "mobile/", "safari/" string;
Judging method: A rough decision to retrieve only "iphone" and "safari/" string, strict judgment to include "mozilla/", "iphone", "mobile/", "safari/" four strings
iphone version of opera Mobile:
Features: "opera/", with the "iphone" string, including "opera mini/", "presto/" string;
Judging method: A rough judgment to retrieve only "iphone" and "opera/" string, strict judgment should include "opera/", "iphone", "Opera mini/", "presto/" four strings
Summary: The iphone's browser useragent contains the "iphone" string

Android Platform Browser series:

Android has its own browser (some say it's chrome, but Google doesn't make a presentation and is still developing a chrome to Phone that runs on Android):
Feature performance: "mozilla/", with "Android" and "Linux" strings, with "applewebkit/", "mobile safari/" string;
Judging method: Because it is not known whether Android will have independent safari in the future (not expected), so it is recommended to strictly judge directly, retrieve "mozilla/", "Android", "Linux", "applewebkit/", "mobile safari/"Five Strings
Android version of opera Mobile:
Feature performance: "opera/" with "Android" and "Linux" strings, including "opera mobi/", "presto/" string;
Judging method: The rough judgment searches only "Android" and "opera/", the strict judgment must also include "opera/", "Android", "Linux", "Opera mobi/", "presto/" five strings
Android version Firefox:
Feature performance: "mozilla/" with "Android" and "Linux" strings, with "firefox/", "gecko/", "fennec/" string;
Judging method: The rough judgment searches only "Android" and "firefox/", the strict judgment must also include "mozilla/", "Android", "Linux", "firefox/", "gecko/", "fennec/" six strings
Summary: The browser useragent on the Android platform all contain "Android" and "Linux" strings

The above main browser parsing of Windows, iphone and Android is almost over, and Linux on other platforms should be at least as similar to Android platforms, and Mac OS ipad and Macintosh should be similar to iphone platforms, So for the time being, and because there is not so much equipment and operating system to test, I hope to be able to fill in the future.

Today's Web site product development requirements are not the same as before, because not only to meet the computer browsing, but also to meet the user through the smartphone (here only the iphone, Android, Windows Phone and other real smartphones, BlackBerry and palm Such a small public half intelligent system for the time being not considered, as for Symbian this pseudo intelligent system on the side to play it through the above three representative platform, can also be roughly measured according to the browser useragent to judge the user device solution.

1, if the need to judge the operating system, the method is relatively simple, in the useragent to retrieve the following string:

Contains "Windows NT": Obviously, the Windows operating system, the version number after NT can determine the OS version;
A system containing "Mac": Apple's Mac OS X or other Mac OS kernel;
Contains "iphone": Apple iphone proprietary, in general should also contain a "Mac";
Contains "ipad": Apple ipad tablet computer (data show ipad browser useragent also contains "Mac", "iphone", "ipad");
Contains "Linux": Linux operating systems or other operating systems with Linux as the kernel;
Contains "Android": Google's Android operating system, possibly smartphones, and possibly an Android tablet, and, in general, UserAgent on the Android platform should include "Linux";
Contains "Unix", "SunOS", "BSD" one of the three: Unix system, in fact, the user experience of this system, the current almost can not be considered;
Contains "Ubuntu": Ubuntu custom version of Linux
......

As you can see, it's not always useful to judge the operating system and its version, but there's always a place to go, such as developing pages that specifically address the screen resolution of devices such as the iphone, ipad, Android, etc.

2, to determine the browser's core, the method is not difficult, I figured out, not all right AH:

IE (Trident) kernel (ie for Mac, ies4linux and so on, not to mention, only consider Windows): "mozilla/" with "Windows NT" and "MSIE" string;
Firefox (Gecko) kernel: "mozilla/" begins with "firefox/" and "gecko/" strings, including the Android version with a "fennec/" string;
Opera () Kernel: with "opera/" beginning, contains "presto/" string, in which the iphone version also has "opera mini/", Android version also with "opera mobi/";
WebKit kernel: With "mozilla/" beginning, contains "applewebkit/" and "safari/" string, which with "chrome/" is the Chrome browser, not with Safari or other;
That's the main browser kernel.

The browser kernel is the key to solving compatibility problems, however, this compatibility issue has been solved by the framework of jquery and ExtJS, so this judgment is only used for individual page CSS styles with different kernel rendering effects, of course, It is also important to note that the same kernel renders different results on different devices, such as smartphones and computers.

3, to determine the actual application of browser Useagent example:

The different browser kernel to the page rendering effect is different, although already has jquery and ExtJS and so on for us to do the compatibility processing, but still will have some small difference to need us to handle separately, at this time needs to judge the browser kernel;
Users are not only through the computer to visit the site, with the growing popularity of smartphones and tablet computers, the use of the two to the proportion of the Internet more and more high, how to do? The tablet is OK, the screen is high resolution, the smartphone is limited by his screen size and resolution, although it has strong processing power, it can support the existing website perfectly, but it's no harm to think more about the customer. After all, through the local scaling drag to see the Web page is uncomfortable, then, we can specifically for the iphone, Android, such as the narrow screen to provide a dedicated version of the layout, one to enhance the browsing experience, and secondly reduce network traffic, speed up access speed;
Visit the passenger traffic analysis, by determining the customer browser type and record its number, to optimize the design of their own website, to enhance their customer experience respectively

Copy Code code 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:
Kindeditor Open Source Editor source code to detect the browser method:
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)
};
})();