SoFunction
Updated on 2025-04-03

Vue development method of different browser types judgement methods

1. Make browser type judgment by

Definition and usage

The userAgent property is a read-only string that declares the value of the user agent header used by the browser for HTTP requests.

Generally speaking, it is composed of the value of , followed by the value of , and the value of .

For example: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322).

Note: User agent header: user-agent header.

grammar

Use scenarios

Determine whether it is Android or iOS

/**
 * Determine browser type: Android/iOS
 */
function getOSType() {
  if (/(Android)/()) {
    return 'Android'
  } else if (/(iPhone|iPad|iPod|iOS)/()) {
    return 'iOS'
  }
}

Determine whether it is a WeChat browser

function is_weixin(){
  if (/(micromessenger)/()) {
    return true
  } else {
    return false
  }
}

Determine whether it is a QQ browser

function is_qq(){
  if (/(MQQBrowser)/()) {
    return true
  } else {
    return false
  }
}

Determine whether it is a mobile phone, tablet or PC

var os = function (){
    var ua = ,
    isWindowsPhone = /(?:Windows Phone)/.test(ua),
    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
    isAndroid = /(?:Android)/.test(ua),
    isFireFox = /(?:Firefox)/.test(ua),
    isChrome = /(?:Chrome|CriOS)/.test(ua),
    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
    isPc = !isPhone && !isAndroid && !isSymbian;
    return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
    };
}();
 
if ( || ) {
  ("cell phone")
} else if () {
  ("flat")
} else if() {
  ("computer")
}

Format

Some browser formats are as follows (PC):

  • Chrome browser：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
  • IE11 browser：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko
  • safari 5.1 – MAC：User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
  • safari 5.1 – Windows：User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
  • Firefox 4.0.1 – MAC：User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
  • Firefox 4.0.1 – Windows：User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
  • Opera 11.11 – MAC：User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11
  • Opera 11.11 – Windows：User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
  • 360 Browser：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)
  • Sogou Browser：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE MetaSr 1.0; SE MetaSr 1.0; .NET CLR 2.0.50727; SE MetaSr 1.0)

Some browser formats are as follows (mobile):

  • iphone6：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
  • ipad：Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
  • Android QQ browser for android：User-Agent: MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
  • Windows Phone：User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)
  • BlackBerry：User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+
  • UC standard：User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999

2. Make browser type judgment by

Because major browser manufacturers can set it up, the userAgent format is confusing. For example: The information of the default browser userAgent of Huawei mate10 is as follows:

Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.89 Safari/537.36

The result can be imagined. According to the judgment made by userAgent, the current browser type is PC. Therefore, it is necessary to make judgments based on judgments to ensure the accuracy of browser type judgment.

Definition and usage

The platform property is a read-only string that declares the operating system and/or hardware platform that runs the browser.

grammar

Use scenarios

Determine whether it is Android or iOS

/**
 * Determine whether it is Android or iOS
 */
function getPlatformType() {
  if ('Android' === ) {
    return 'Android'
  } else if ('iPhone' ===  || 'iPod' ===  || 'iPad' === ) {
    return 'iOS'
  }
}

Possible values ​​returned

> HP-UX
> Linux i686
> Linux armv7l
> Mac68K
> MacPPC
> MacIntel
> SunOS
> Win16
> Win32
> WinCE
> iPhone
> iPod
> iPad
> Android
>Blackberry
> Opera

3. Make browser type judgment based on screen size

The browser type can be determined by the screen size

The method to get the screen width is as follows:

  • The visible area width of the web page:
  • The visible area height of the web page:
  • Width of visible area on the web page: (including the width of the edge line)
  • The visible area height of the web page: (including the width of the edge line)

The above is personal experience. I hope you can give you a reference and I hope you can support me more.