1. Ability testing

  • Also known as feature detection, it tests whether the browser supports a certain feature. It does not require to know the browser information in advance, but only tests whether the ability of its own relationship exists.

    if(object.propertyInQuestion){
  // use it
}
Copy the code

  • Downgrading schemes, using low-level methods when not supported

    function getElement(id) {
  if(document.getElementById) {
    return document.getElementById(id)
  }else if(document.all) {
    / / IE5 before
    return document.all[id]
  }else {
    throw new Error('xxxx')}}Copy the code

  • First detect the most common ways to optimize code execution.

  • The desired characteristics must be tested. Just because one ability exists doesn’t mean other abilities exist

    • If document.all cannot be detected, it is considered to be IE.

1. Safety ability testing

  • As well as detecting the presence of the capability, verify that it is capable of exhibiting the desired behavior.

    // Error, sort property will also fanhuitrue
function isSortable(object) {
  return!!!!! object.sort }// Typeof is preferred
function isSortable(object) {
  return typeof object.sort === 'function'
}
Copy the code

  • Typeof detects document.createElement in IE8 and below returns object instead of function

2. Browser analysis based on capability detection

1. Detection characteristics

  • Test all capabilities centrally, rather than waiting until they are used

2. Check the browser

  • What browser is used based on certain features

3. Limitations of ability testing

  • It is not always possible to determine which browser is being used by detecting one or a group of capabilities.

2. User agent detection

  • User agent detection determines which browser to use from the user agent string of the browser. Included in the header of each HTTP request can be passednaviagtor.userAgentTo obtain.

1. User agent history

  • The HTTP specification requires the browser to pass a short string containing the browser name and version information to the server. Tag/version form

1. Early browsers

  • National Center for Supercomputing ApplicationsMosaic / 0.9
  • netscape
    • Mozilla/Version [Language] (Platform; Encryption)
      • Language Language
      • Platform Operating system or Platform
      • Encryption Specifies the security Encryption type included (U, I, N).
      • Mozilla / 2.02 [fr] (WinNT; 1)

2. Netscape Navigator 3 and IE3

  • The language information is deleted and the operating system or system CPU information is optional

  • At this point, IE masquerades as Mozilla with high market penetration, and the real information is in the middle of the string

3, Netscape Communicator 4 and IE4 ~ 8

  • The format is basically unchanged, IE8 compatible mode identifierTrident

4. Gecko (Firfox rendering Engine)

  • Mozilla/MozillaVersion (Platform; Encryption; OS-or-CPU; Language; PrereleaseVersion)Gecko/GeckoVersion ApplicationProduct/ApplicationProductVersion

5. Webkit (Safari rendering Engine)

  • Mozilla / 5.0 (Platform; Encryption; OS-or-CPU; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Safari/SafariVersion
    • SafariVersion is the build number, which was added laterVersion/ Actual Version number

6, Konqueror

7, Chrome

Mozilla / 5.0 (Platform; Encryption; OS-or-CPU; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Chrome/ChromeVersion Safari/SafariVersion

8, Opera

9. IOS vs. Android

  • iOS

    Mozilla / 5.0 (Platform; Encryption; OS-or-CPU like Mac OS X; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Version/BrowserVersion Mobile/MobileVersion Safari/SafariVersion

  • Android

    Mozilla / 5.0 (Linux; U; The Android 2.2. en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

2. Browser analysis

  • There are rules that can be used to accurately identify browsers

1. Forge user agents

  • through__defineGetter__Tampering, a thankless task.

2. Analyze the browser

  • Determine the following environment information from the user agent returned by the browser
    • Browser, Browser version, Browser rendering engine, Device type, device manufacturer, device model, OPERATING system, OPERATING system version.
  • Third-party user agent resolver
    • Bowser, uaparser.js, platfrom. js, current-device, Google Closuer, Mootools

3. Software and hardware detection

  • API on navigator, not necessarily supported

1. Identify browser and operating system

1, the navigator. Oscpu

2, the navigator. Vendor

  • Browser Developer Information
    • Goolgle Inc.
    • Apple Computer, Inc.

3, the navigator. Platform

  • Indicates the operating system where the browser resides
    • MacIntel
    • Win32
    • FreeBSD i386
    • WebTV OS

Screen.colordepth and screen.pixeldepth

  • Display each pigment color bit depth

5, screen orientation

  • ScreenOrientation object, containing Angle and Type, with an enumerated value of type
    • portrait-primary
    • portrait-secondary
    • landscape-primary
    • landscape-secondary

2. Browser metadata

1, the Geolocation API

  • Navigator. geolocation Is the API exposed to be aware of the location of the current device.
    • GetCurrentPosition () gets the current position
      • Timestamp query time indicates the timestamp
      • Coords coordinate information object
        • Latitude LONGITUDE and latitude
        • Precision accuracy
        • Speed speed
        • Heading toward

Connection State and Network Information API

  • Network Connection Status
    • Connection events window.online, window.offline
    • Attribute the navigator. OnLine
  • Navigator. connection exposes the Network Information API
    • Downlink Device bandwidth Mbit/s
    • DownlinkMax Maximum downlink bandwidth
    • EffectiveType Indicates the value of the connection speed
      • Slow – 2G, 2G, 3G, 4G
    • RTT ms Actual network round-trip time
    • type
    • SaveData Whether to throttling mode
    • Onchange Any connection change detection event

3. Battery Status API

  • navigator.getBattery()
  • Four read-only properties
    • Whether charging is plugged into a power supply
    • ChargingTime How many seconds remain until full
    • How many seconds do I have left for exhaustion
    • Level electricity percentage
  • Four event properties that can be listened on by adding event listeners or assigning values to event properties
    • onchargingchange
    • onchargingtimechange
    • ondischargingtimechange
    • onlevelchange

3, hardware,

1. Number of processor cores

  • navigator.hardwareConcurrency

2. Device memory size

  • navigator.deviceMemory

3. Maximum number of associated contacts supported by the touch screen

  • navigator.maxTouchPoints

​