js使用navigator.userAgent判斷當前瀏覽器所處的環(huán)境
navigator.userAgent : 瀏覽器用于 HTTP 請求的用戶代理頭的值,通過UserAgent可以取得瀏覽器類別、版本,客戶端操作系統(tǒng)等信息。
在PC端打開 ,navigator.userAgent 顯示如下
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
在手機web端打開 ,navigator.userAgent 顯示如下
Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
場景1:判斷頁面是在手機端還是PC端打開
window.location.href=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?"http://localhost:8888/mobile_web":"http://localhost:8888/PC";
場景2:判斷頁面是在手機端,平板端還是PC端打開
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) {
alert("手機" );
} else if (os.isTablet) {
alert("平板" );
} else if (os.isPc) {
alert("電腦" );
}場景3:獲取操作系統(tǒng)類型,判斷是Android或者IOS
/**
* 獲取操作系統(tǒng)類型,
* 0 Android
* 1 iOS
*/
function getOSType() {
if (/(Android)/i.test(navigator.userAgent)) {
return 0;
} else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
return 1;
} else {
return 2;
}
}
場景4:判斷當前環(huán)境是否是微信環(huán)境
function is_weixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
到此這篇關于js使用navigator.userAgent判斷當前瀏覽器所處的環(huán)境的文章就介紹到這了,更多相關js navigator.userAgent瀏覽器環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細介紹了JavaScript使用ZeroClipboard操作剪切板的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
MUI頂部選項卡的用法(tab-top-webview-main)詳解
最近用MUI做手機app應用的時候,遇到的小bug,這里小編給大家分享MUI頂部選項卡的用法(tab-top-webview-main)詳解,感興趣的朋友一起看看吧2017-10-10

