Javascript determines the browser and version based on the userAgent string

Whether in php or js, userAgent can return some information about the browser. Below I have sorted out some methods to use js to obtain the userAgent string to judge the browser and version.

Mobile phone language version judgment

Use navigator. browserLanguage can be used to obtain the windows phone language version. Of course, there are also compatibility differences between the hateful little mobile phone language versions. Browsers compatible with Mozilla and the AppleWebKit kernel can access the language version and list navigator. language.

The Code is as follows:

Copy code

<Script type = "text/javascript"> /* Smartphone browser version :*/ Var browser = { Versions: function (){ Var u = navigator. userAgent, app = navigator. appVersion; Return {// mobile terminal browser version information Trident: u. indexOf ('think')>-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 ('k') =-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.bKjia. c0m "target = _ blank> <U> iPhone </U> </A>: u. indexOf ('<A href = "http://www.hzhuti.com" target = _ blank> <U> iPhone </U> </A>')>-1 | u. indexOf ('mac')>-1, // whether the browser is an iPhone or QQHD Browser IPad: u. indexOf ('ipad ')>-1, // whether iPad WebApp: u. indexOf ('safari ') =-1 // whether the web should be a program with no header or bottom }; }(), Language :( navigator. browserLanguage | navigator. language). toLowerCase () } Document. writeln ("language version:" + browser. language ); Document. writeln ("whether it is a mobile terminal:" + browser. versions. mobile ); Document. writeln ("ios terminal:" + browser. versions. ios ); Document. writeln ("android terminal:" + browser. versions. android ); Document. writeln ("iPhone:" + browser. versions. iPhone ); Document. writeln ("iPad:" + browser. versions. iPad ); Document. writeln (navigator. userAgent ); </Script>

Windows operating system browser series:

Internet Explorer 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.
Firefox for Windows:
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;
Chrome for Windows:
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;
Simplified 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 /";
Customized Windows Safari:
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
Simplified iPhone version 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
Summary: The browser userAgent on the iPhone contains the "iphone" String

Android platform browser series:

Ghost 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
Simplified Android Opera Mobile:
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
Firefox for Android:
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 the Android platform 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;
"Mac": Mac OS x of Apple or other Mac OS Kernel systems;
Iphone: Apple's iphone is exclusive. Generally, it should also contain mac ";
Iphone contains "ipad": Apple iPad tablet (information indicates that the iPad browser userAgent also contains "mac", "iphone", "ipad ");
◦ Contains "linux": Linux operating system or other operating systems that use linux as the kernel;
◦ Contains "android": Google's Android operating system, which may be a smartphone or an android tablet, generally, the userAgent on the android platform should also contain "linux ";
◦ Contains "unix", "sunos", and "bsd". One of them is a Unix system. In fact, the user experience of this system is almost negligible;
Ubuntu: customized linux

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:

Skip IE (Trident) kernel (IE for Mac, IEs4Linux and so on, only consider windows): starts with "mozilla, contains "windows nt" and "msie" strings;
Parse Firefox (Gecko) kernel: starts with "mozilla/" and contains "firefox/" and "gecko/" strings, android also contains the "fennec/" string;
Kernel Opera (): starts with "opera/" and contains "presto/" strings. iphone also contains "opera mini /", the Android version also includes "opera mobi /";
Embedded Webkit kernel: starts with "mozilla/" and contains "applewebkit/" and "safari/" strings. The chrome browser contains "Chrome, safari or others are not included;
The kernel 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:

The rendering effects of different browser kernels on pages vary. Although jQuery and Extjs have already been compatible with us, there are still some small differences that need to be processed separately, in this case, you need to determine the browser kernel;
As smartphones become increasingly popular and tablet computers become popular, the proportion of users 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;
Butler performs visitor traffic analysis. by determining the customer's browser type and recording its quantity, It optimizes the design of its own website to improve the customer experience.