1. 程式人生 > >js如何判斷使用者使用的裝置型別及平臺

js如何判斷使用者使用的裝置型別及平臺

 1、首先判斷pc端還是移動端。

function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

 2、判斷使用者移動端使用的系統平臺

var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
        //安卓手機
    } else if (u.indexOf('iPhone') > -1) {
        //蘋果手機
    } else if (u.indexOf('Windows Phone') > -1) {
        //winphone手機
    }

3、判斷使用者是否在微信中開啟

function isWeiXin(){ 
        var ua = navigator.userAgent.toLowerCase(); 
        if(ua.indexOf('micromessenger') != -1) { 
            return true; 
        } else { 
            return false; 
        } 
    }

先給出一個例項:判斷windows、linux、android

複製以下程式碼另存為html檔案即可。

<html>
<head>
<title>判斷作業系統</title>
<script type="text/javascript">
function detectOS() { 
var sUserAgent = navigator.userAgent; 

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); 
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel"); 
if (isMac) return "Mac"; 
var isUnix = (navigator.platform == "X11") && !isWin && !isMac; 
if (isUnix) return "Unix"; 
var isLinux = (String(navigator.platform).indexOf("Linux") > -1); 

var bIsAndroid = sUserAgent.toLowerCase().match(/android/i) == "android";
if (isLinux) {
if(bIsAndroid) return "Android";
else return "Linux"; 
}
if (isWin) { 
var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1; 
if (isWin2K) return "Win2000"; 
var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || 
sUserAgent.indexOf("Windows XP") > -1; 
if (isWinXP) return "WinXP"; 
var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1; 
if (isWin2003) return "Win2003"; 
var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1; 
if (isWinVista) return "WinVista"; 
var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1; 
if (isWin7) return "Win7"; 
} 
return "other"; 
} 
document.writeln("您的作業系統是:" + detectOS()); 
alert(detectOS());
</script>
</head>
<body>
</body>
</html>

判斷當前訪問網站的裝置是否是PC

//平臺、裝置和作業系統
var system ={
win : false,
mac : false,
xll : false
};
//檢測平臺
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//跳轉語句
if(system.win||system.mac||system.xll){
alert("PC訪問");
}else{
alert("非PC訪問");
}

JS判斷訪問裝置(userAgent)載入不同頁面。程式碼如下:

function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (! (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
window.location.href = B頁面;
}
}
browserRedirect();

JS判斷客戶端作業系統型別(platform)來定義不同的字體表現。程式碼如下:

// 更詳細的探測當前客戶端使用的作業系統
function detectOS() {
var sUserAgent = navigator.userAgent;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel"); if (isMac) 
return "Mac";
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
if (isUnix) return "Unix";
var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
if (isLinux) return "Linux";
if (isWin) {
var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
if (isWin2K) return "Win2000";
var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
if (isWinXP) return "WinXP";
var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
if (isWin2003) return "Win2003";
var isWin2003 = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
if (isWin2003) return "WinVista"; 
var isWin2003 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
if (isWin2003) return "Win7";
} 
return "other"; 
}

另一種方法,使用mootools框架:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>未命名</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
</head>
<body>
<h1>test Browser.Platform.linux</h1>
<script type="text/Javascript" language="JavaScript">
var s = null;
s = Browser.Platform.linux;
alert(s);
if (Browser.Platform.linux)
alert("linux");
else
alert("not linux");
</script>
</body>
</html>

使用JS架框有現成的判斷  例如motools架框中: Browser.Platform.mac - (boolean) 當前作業系統是否為Mac Browser.Platform.win - (boolean) 當前作業系統是否為Windows Browser.Platform.linux - (boolean) 當前作業系統是否為Linux Browser.Platform.ipod - (boolean) 當前作業系統是否為iPod Touch / iPhone Browser.Platform.other - (boolean) 當前作業系統即不是Mac, 也不是Windows或Linux Browser.Platform.name - (string) 當前作業系統的名稱  

附: 在WIN7系統下和XP系統下的宋體顯示是不一樣的、有的時候容易撐破格子  而且WIN7下面微軟雅黑是系統自帶的、效果很好!  以下的程式碼可以方便我們判斷不同的系統在使用不同系統裡自帶效果好的字型!或者其它一些東西!  呼叫辦法各系統下最佳字型 Win7 and Vista "Microsoft Yahei",Tahoma  XP Tahoma, Helvetica, Arial, 'SimSun', sans-serif  MAC "Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial 淘寶上用的通用的系統字型  Tahoma, Helvetica, Arial, 'Microsoft Yahei', sans-serif

參考資料:http://www.camnpr.com/archives/js-judge-device-and-os.html