Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to judge the types of different browsers in vue development. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Definition and usage of browser type judgment through navigator.userAgent

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

Generally speaking, it is formed by adding a slash and the value of navigator.appVersion after the value of navigator.appCodeName.

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

Navigator.userAgent

Navigator.userAgent uses Android or iOS/** * to determine the browser type: Android/iOS * / function getOSType () {if (/ (Android) / i.test (navigator.userAgent)) {return 'Android'} else if (/ (iPhone | iPad | iPod | iOS) / i.test (navigator.userAgent)) {return' iOS'}} determine whether it is Wechat browser function is_weixin () {if (/ (micromessenger) / I) .test (navigator.userAgent) {return true} else {return false}} determine whether it is QQ Browser function is_qq () {if (/ (MQQBrowser) / i.test (navigator.userAgent)) {return true} else {return false}} determine whether it is the mobile phone, Flat panel or PCvar os = function () {var ua = navigator.userAgent IsWindowsPhone = / (WindowsPhone) / .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 (os.isAndroid | | os.isPhone) {console.log ("Mobile")} else if (os.isTablet) {console.log ("tablet")} else if (os.isPc) {console.log ("computer")} navigator.userAgent format

Some browsers are in the following format (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; .NET 4.0C; .net 4.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

Browsers: User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)

Sogou browser 1.x:User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.x MetaSr 1.0; SE 2.x MetaSr 1.0; .NET CLR 2.0.50727; SE 2.x MetaSr 1.0)

Some browsers are in the following format (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

Second, judge the type of browser through navigator.platform

Because the major browser manufacturers can set up navigator.userAgent, resulting in the confusion of userAgent format. For example, the information of Huawei mate10 default browser userAgent 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 is conceivable, according to userAgent's judgment: the current browser type is PC. Therefore, it is necessary to judge navigator.platform on the basis of navigator.userAgent judgment, so as 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 running the browser.

Grammar

Navigator.platform

Navigator.platform uses scenarios to determine whether it is Android or iOS/** * to determine whether it is Android or iOS * / function getPlatformType () {if ('Android' = navigator.platform) {return' Android'} else if ('iPhone' = navigator.platform | |' iPod' = navigator.platform | | 'iPad' = navigator.platform) {return' iOS'}} navigator.platform.

> HP-UX

Linux i686

> Linux armv7l

> Mac68K

> MacPPC

> MacIntel

> SunOS

> Win16

> Win32

> WinCE

> iPhone

> iPod

> iPad

> Android

BlackBerry

Opera

Third, judge the type of browser by screen size.

The browser type can be determined by the screen size.

The method to get the screen width is as follows:

Width of visible area of web page: document.body.clientWidth

Height of visible area of web page: document.body.clientHeight

Visible area width of the web page: document.body.offsetWidth (including the width of the border)

Visible area height of the web page: document.body.offsetHeight (including the width of the border)

This is the end of this article on "how to judge the types of different browsers in vue development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.