JavaScript determines browser and version based on UserAgent string

The judgment of mobile language version

Use Navigator.browserlanguage to get the Windows Phone language version, of course, the hateful Small mobile language version also has compatibility differences, compatible with Mozilla, and AppleWebKit kernel browser access to its language version, It will list navigator.language.

The code is as follows

Copy Code

<script type= "Text/javascript" > /* Smart Browser version information: * * var browser={ Versions:function () { var u = navigator.useragent, app = Navigator.appversion; return {//Mobile terminal browser version information Trident:u.indexof (' Trident ') >-1,//ie kernel Presto:u.indexof (' presto ') >-1,//opera kernel Webkit:u.indexof (' AppleWebKit ') >-1,//Apple, Google kernel Gecko:u.indexof (' Gecko ') >-1 && u.indexof (' khtml ') = = 1,//Firefox kernel Mobile:!! U.match (/applewebkit.*mobile.*/) | |!! U.match (/applewebkit/),//Whether it is a mobile terminal Ios:!! U.match (/(i[^;] +;( U;)? Cpu.+mac OS x/),//ios terminal Android:u.indexof (' Android ') >-1 | | U.indexof (' Linux ') >-1,//android terminal or UC Browser <a href= "Http://www.111cn.net" TARGET=_BLANK&GT;&LT;U&GT;IPHONE&LT;/U&GT;&LT;/A&GT;: U.indexof (' <a href= ') Http://www.111cn.net "Target=_blank><u>iphone</u></a> ') >-1 | | U.indexof (' Mac ') >-1,//whether for iphone or Qqhd browser Ipad:u.indexof (' ipad ') >-1,//whether the ipad Webapp:u.indexof (' Safari ') = = 1/Whether the Web should program, without head and bottom }; }(), Language: (Navigator.browserlanguage | | navigator.language). toLowerCase () } Document.writeln ("language version:" +browser.language); Document.writeln ("Whether for Mobile Terminal:" +browser.versions.mobile); Document.writeln ("iOS terminal:" +browser.versions.ios); Document.writeln ("Android Terminal:" +browser.versions.android); Document.writeln ("Whether for IPhone:" +browser.versions.iphone); Document.writeln ("Whether the IPad:" +browser.versions.ipad); Document.writeln (navigator.useragent); </script>

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 of 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
◦: The iphone's browser useragent contains the "iphone" string

Android Platform Browser series:

◦android Browser (some say it's chrome, but Google doesn't make it, and it's also developing a chrome to Phone that runs on Android):
Feature Performance: "mozilla/" contains " Android "and" Linux "strings, with" applewebkit/"," mobile safari/"strings;
How to: Because I don't know if Android is going to have an independent safari in the future (I guess not), So it is recommended to strictly judge directly, retrieve "mozilla/", "Android", "Linux", "applewebkit/", "mobile safari/" five strings
◦android version of Opera Mobile:
Features: "opera/", with "Android" and "Linux" strings, including "opera mobi/", "presto/" string;
Judging method: A rough way to find only "Android" and "opera/" Strict judgment should include "opera/", "Android", "Linux", "Opera mobi/", "presto/" five strings
◦android version Firefox:
Feature performance: "mozilla/", containing "Android" and "Linux" strings, with "firefox/", "gecko/", "fennec/" strings,
Judgment method: A rough decision to retrieve only "Android" and "firefox/", and strict judgment to include both " mozilla/"," Android "," Linux "," firefox/"," gecko/"," fennec/"six Strings
◦ Summary: The browser useragent on the Android platform contains" Android "and" Linux "string
above the main browser resolution for Windows, iphone, and Android is almost over, and Linux on other platforms should be at least similar to the Android platform, using a Mac OS ipad and Macintosh should be similar to the iphone platform, so do not parse 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.

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;
◦ contains "Mac": Apple's Mac OS X or other Mac OS kernel system;
◦ contains an "iphone": proprietary to Apple's iphone and should normally contain a "Mac";
◦ contains "ipad": Apple ipad tablet computer (data shows that the 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 system's user experience problem, at present 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, where the Android version also has a "fennec/" string;
◦opera () Kernel: "opera/" with the beginning of "presto/" string, including the iphone version also has "opera mini/", the 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;
◦ above is 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:

◦ 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 and not only through the computer access to the site, with the growing popularity of smartphones and tablets of the big line, the use of the two to the Internet, the proportion of 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;
◦ visits the passenger traffic analysis, by the Judgment customer browser type and records its quantity, optimizes the design own website, improves its customer experience separately