Elevation 9th Client Detection

9.1 Capability Detection

The most commonly used and most widely accepted is that the client detection form is capability detection (also called feature detection). The goal of competency detection is not to identify a particular browser, but to identify the browser's capabilities.

Detection, the most commonly used features can be detected first to ensure that the code is optimized, because in most cases you can avoid testing multiple conditions.

You must test the actual features you want to use. An attribute exists that does not necessarily imply that another feature exists.

9.1.1 more reliable capability detection

Sometimes the only way to detect the existence of a method is not good, the better way is to detect is not a function.

Whenever possible, use typeof for ability testing.

In IE8 and earlier versions, typeof detection of document.createelement () is not true, but false, because it returns "object" instead of "function" in IE8 and before. DOM objects are host objects, and the host objects in IE and earlier versions are implemented through COM rather than JScript. IE9 and later, return "function".

The current use of the Ishostmethod () method is still relatively reliable, but does not guarantee that 100% is always reliable.

9.1.2 capability detection, not browser detection

In real-world development, capability detection should be used as a basis for determining the next solution, rather than using it to determine what browser the user is using.

9.2 Quirks Detection

Similar to capability detection, the goal of quirks detection is to identify the specific behavior of the browser.

But unlike ability detection to confirm what the browser supports, quirks detection is to know what bugs the browser has ("quirks" are bugs).

For example, there is a bug in IE8 and earlier that if an instance property has the same name as a prototype property marked false by [[Enumerable]], then the instance property will not appear in the for-in loop.

Another "quirk" that often needs to be detected is that the previous version of Safari3 enumerates the hidden properties.

9.3 User Agent Detection

The user agent detects the actual browser by detecting the user agent string. During each HTTP request, the user agent string is sent as a response header, and the string can be accessed through the JavaScript's Navigator.useragent property.

The following is a complete user agent string detection script that includes a detection rendering engine, Platform, window operating system, mobile device and game system.

varClient=function(){    //Rendering Engine    varEngine={ie:0, Gecko:0, WebKit:0, khtml:0, Opera:0,        //the full version numberVerNULL    }; //Browser    varBrowser={        //Main Browserie:0, Firefox:0, Safari:0, Konq:0, Opera:0, Chrome:0,        //the specific version numberVerNULL    }; //platforms, devices and operating systems    varsystem={win:false, Mac:false, X11:false,        //Mobile DevicesIphone:false, ipod:false, ipad:false, iOS:false, Android:false, Nokian:false, winmobile:false,        //Game SystemWii:false, PS:false    }; //detecting rendering engines and browsers    varUa=navigator.useragent; if(Window.opera) {Engine.ver=browser.ver=window.opera.version (); Engine.opera=browser.opera=parsefloat (Engine.ver); }Else if(/applewebkit\/(\s+)/. Test (US)) {Engine.ver=regexp ("$"); Engine.webkit=parsefloat (Engine.ver); //Are you sure it's Chrome or safari ?        if(/chrome\/(\s+)/. Test (US)) {Browser.ver=regexp["$"]; Browser.chrome=parsefloat (Browser.ver); }Else if(/version\/(\s+)/. Test (UA)) {Browser.ver=regexp["$"]; Browser.safari=parsefloat (Browser.ver); }Else{            //to approximate the version number            varSafariversion=1; if(engine.webkit<100) {safariversion=1; }Else if(engine.webkit<312) {safariversion=1.2; }Else if(engine.webkit<412) {safariversion=1.3; }Else{safariversion=2; } Browser.safari=browser.ver=safariversion; }    }Else if(/khtml\/(\s+)/.test (UA) | | /konqueror\/([^;] +)/. Test (UA)) {Engine.ver=browser.ver=regexp["$"]; Engine.khtml=browser.konq=parsefloat (Engine.ver); }Else if(/RV: ([^\)]+) \) gecko\/\d{8}/. Test (UA)) {Engine.ver=regexp["$"]; Engine.gecko=parsefloat (Engine.ver); //Make sure Firefox is not        if(/firefox\/(\s+)/. Test (UA)) {Browser.ver=regexp["$"]; Browser.firefox=parsefloat (Browser.ver); }    }Else if(/msie ([^;] +)/. Test (UA)) {Engine.ver=browser.ver=regexp["$"]; engine.ie=browser.ie=parsefloat (Engine.ver); }    //Detecting BrowsersBrowser.ie=engine.ie; Browser.opera=Engine.opera; //Testing Platform    varp=Navigator.platform; System.win=p.indexof ("Win") ==0; System.mac=p.indexof ("Mac") ==0; System.x11= (p== "X11") | | (P.indexof ("Linux") ==0); //Detecting Windows operating systems    if(System.win) {if(/win (?:d ows)? ([^do]{2}) \s? (\d+)?. Test (UA)) {            if(regexp["$"]== "NT"){                Switch(regexp["$"]){                     Case"5.0": System.win= "2000";  Break;  Case"5.1": System.win= "XP";  Break;  Case"6.0": System.win= "Vista";  Break;  Case"6.1": System.win= "7";  Break; default: System.win= "NT";  Break; }            }Else if(regexp["$"]== "9x") {System.win= "ME"; }Else{System.win=regexp["$"]; }        }    }    //Mobile AttuneSystem.iphone=ua.indexof ("iphone") >-1; System.ipod=ua.indexof ("IPod") >-1; System.ipad=ua.indexof ("IPad") >-1; System.nokian=ua.indexof ("Nokian") >-1; //Window Mobile    if(system.win== "CE") {System.winmobile==System.win; }Else if(system.win== "Ph"){        if(/windows Phone OS (\d+.\d+)/. Test (UA)) {System.win= "Phone"; System.winmobile=parsefloat (regexp["$"]); }    }    //Detecting iOS versions    if(System.mac&&ua.indexof ("mobile") >-1){        if(/cpu (?: IPhone)? OS (\d+_\d+)/. Test (UA)) {System.ios=parsefloat (Regexp.$1.replace ("_", "."))); }Else{System.ios= 2;//Can not really detect it, so can only guess        }    }    //Detect Android version    if(/android (\d+\.\d+)/. Test (UA)) {system.android=parsefloat (regexp.$1); }    //Game SystemSystem.wii=ua.indexof ("Wii") >-1; System.ps=/playstation/i.test (UA); //return these objects    return{engine:engine, browser:browser, System:system};} ();

User agent detection generally applies to the following situations:

Ability detection or quirks detection cannot be directly and accurately used.

The same browser has different capabilities under different platforms. At this point, it may be necessary to determine which platform the browser is on.

You need to know the exact browser for the purpose of tracking the analysis.

9.4 Summary

Capability Detection: Detects the ability of a particular browser before writing code. For example, a script might want to detect the existence of a function before calling it. Capability detection does not accurately detect specific browsers and versions.

Quirks detection: Quirks are actually bugs in the browser implementation, such as a quirk in early webkit that it returns hidden properties in the for-in loop. Quirks detection usually involves running a small piece of code, Then determine if the browser has a quirk. Because quirks detection is less efficient than ability detection, it should only be used if a quirk interferes with the script. Quirks detection does not accurately detect specific browsers and versions.

User Agent Detection: The browser is identified by detecting the user agent string. The user agent string contains a large number of browser-related information, including browser, platform, operating system, and browser version.

When deciding which client-side detection method to use, it is generally preferable to use capability detection. Quirks detection is the second choice to determine how the code should be handled. User agent detection is the last option for client-side detection, because this method has a strong dependency on user-agent strings.

Elevation 9th Client Detection