您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue開發(fā)中不同瀏覽器的類型判斷方式是什么,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
userAgent 屬性是一個(gè)只讀的字符串,聲明了瀏覽器用于 HTTP 請(qǐng)求的用戶代理頭的值。
一般來講,它是在 navigator.appCodeName 的值之后加上斜線和 navigator.appVersion 的值構(gòu)成的。
例如:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。
注:用戶代理頭:user-agent header。
navigator.userAgent
/** * 判斷瀏覽器類型:Android/iOS */ function getOSType() { if (/(Android)/i.test(navigator.userAgent)) { return 'Android' } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { return 'iOS' } }
function is_weixin(){ if (/(micromessenger)/i.test(navigator.userAgent)) { return true } else { return false } }
function is_qq(){ if (/(MQQBrowser)/i.test(navigator.userAgent)) { return true } else { return false } }
var os = function (){ var ua = navigator.userAgent, 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 (os.isAndroid || os.isPhone) { console.log("手機(jī)") } else if (os.isTablet) { console.log("平板") } else if(os.isPc) { console.log("電腦") }
部分瀏覽器格式如下(PC):
chrome瀏覽器
:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
IE11瀏覽器
: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瀏覽器
:User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)
搜狗瀏覽器 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)
部分瀏覽器格式如下(移動(dòng)端):
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瀏覽器 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標(biāo)準(zhǔn)
:User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999
因?yàn)楦鞔鬄g覽器廠商可以對(duì)navigator.userAgent進(jìn)行設(shè)置,導(dǎo)致了userAgent格式的混亂。例如:華為mate10 默認(rèn)瀏覽器 userAgent的信息如下:
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
結(jié)果可想而知,根據(jù)userAgent做出的判斷:當(dāng)前瀏覽器類型為PC。所以需要在通過navigator.userAgent判斷的基礎(chǔ)上再對(duì)navigator.platform進(jìn)行判斷,以此來確保瀏覽器類型判斷的準(zhǔn)確性。
platform 屬性是一個(gè)只讀的字符串,聲明了運(yùn)行瀏覽器的操作系統(tǒng)和(或)硬件平臺(tái)。
navigator.platform
/** * 判斷是Android或者iOS */ function getPlatformType() { if ('Android' === navigator.platform) { return 'Android' } else if ('iPhone' === navigator.platform || 'iPod' === navigator.platform || 'iPad' === navigator.platform) { return 'iOS' } }
> HP-UX
> Linux i686
> Linux armv7l
> Mac68K
> MacPPC
> MacIntel
> SunOS
> Win16
> Win32
> WinCE
> iPhone
> iPod
> iPad
> Android
>黑莓
>歌劇
通過屏幕大小可以判斷瀏覽器類型
獲取屏幕寬度的方法如下:
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁可見區(qū)域高:document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高:document.body.offsetHeight (包括邊線的寬)
關(guān)于“vue開發(fā)中不同瀏覽器的類型判斷方式是什么”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。