社會(huì)發(fā)展日新月異,科技也在飛速發(fā)展,上網(wǎng)終端中,移動(dòng)設(shè)備異軍突起,以幾何形式在增長(zhǎng),對(duì)于從事于網(wǎng)站建設(shè)的技術(shù)人員來(lái)講,兼容不僅僅是PC上的瀏覽器,PC上的不同平臺(tái)問(wèn)題,更多的要考慮移動(dòng)設(shè)備例如:電話、平板電腦等,我們前面系統(tǒng)地介紹過(guò)如何使用javascript來(lái)識(shí)別不同的瀏覽器、Windows操作系統(tǒng)各個(gè)版本識(shí)別方法、識(shí)別不同平臺(tái)Window、Mac、Unix(Linux)方法,接下來(lái)由南昌網(wǎng)站設(shè)計(jì)公司技術(shù)人員向大家詳細(xì)介紹使用javascript識(shí)別移動(dòng)設(shè)置的方法
2006到2007年,移動(dòng)設(shè)備中Web瀏覽器的應(yīng)用呈爆炸性增長(zhǎng)。所有四大主要瀏覽器都推出了手機(jī)版和在其他設(shè)備中運(yùn)行的版本。其中最流行的兩個(gè)平臺(tái)是iPhone和iPod Touch,相應(yīng)的用戶代理字符串分別為:
Mozilla/5.0 (iPhone;U;CPU like Mac OS X;en) AppleWebKit/420+ (KHTML, like Gecko)
Version/3.O Mobile/IA543a Saf ari/419.3
Mozilla/5.0 (iPod;U;CPU like Mac OS X;en) AppleWebKit/420+ (KHTML, like Gecko)
Version/3.0 Mobile/IC28 Saf ari/419.3
從這兩個(gè)字符串來(lái)看,很明顯iPhone和iPod Touch都使用了Safari(WebKit)。盡管不是真正的Mac平臺(tái),但為了保證通過(guò)平臺(tái)檢測(cè),用戶代理字符串中包含著"CPU like Mac OS x"。有了兩個(gè)字符串,要檢測(cè)相應(yīng)的設(shè)備就很簡(jiǎn)單了。第一步是為要檢測(cè)的所有移動(dòng)設(shè)備添加屬性,如下所示:
然后,通常簡(jiǎn)單地檢測(cè)字符串"iPhone"和"iPod",就可以分別設(shè)置相應(yīng)屬性的值了:
system.iphone=ua.indexOf("iPhone")>-l;
system.ipod=ua.indexOf("iPod")> -1;
system.macMobile= (system.iphone || system.ipod);
諾基亞N系列手機(jī)使用的也是WebKit,其用戶代理字符串與其他基于WebKit的手機(jī)很相似,例如:
Mozilla/5.O(SymbianOS/9.2; U;Series60/3.1 NokiaN95/11.0.026; Profile MIDP:2.O
Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413
雖然諾基亞N系列手機(jī)在用戶代理字符串中聲稱使用的是"Safari",但實(shí)際上并不是Safari,盡管確實(shí)是基于WebKit引擎。只要像下面檢測(cè)一下用戶代理字符串中是否存在"NokiaN",就足以確定是不是該系列的手機(jī)了:
system.nokiaN=ua.indexOf("NokiaN")>-1;
在了解這些設(shè)備信息的基礎(chǔ)上,就可以通過(guò)下列代碼來(lái)確定用戶使用的是什么設(shè)備中的WebKit來(lái)訪問(wèn)網(wǎng)頁(yè):
if ( client.engine.webkit){
if (client.system.macMobile){
//Mac手機(jī)的內(nèi)容
} else if ( client.nokiaN){
//諾基亞手機(jī)的內(nèi)容
}}
最后一種主要的移動(dòng)設(shè)備平臺(tái)是Windows Mobile(也稱為Windows CE),用于Pocket PC和Smartphone中。由于從技術(shù)上說(shuō)這些平臺(tái)都屬于Windows平臺(tái),因此Windows平臺(tái)和操作系統(tǒng)都會(huì)返回正確的值。對(duì)于Windows Mobile 5.0及以前版本,這兩種設(shè)備的用戶代理字符串非常相似,如下
所示:
Mozilla/4.O (compatible; MSIE 4.01; Windows CE; PPC; 240x320)
Mozilla/4.O(compatible; MSIE 4.01; Windows CE; Smartphone; 17 6x220)
第一個(gè)來(lái)自Pocket PC中的移動(dòng)Intemet Explorer4.01,第二個(gè)來(lái)自Smartphone中的同一個(gè)瀏覽器。當(dāng)Windows操作系統(tǒng)檢測(cè)腳本檢測(cè)這兩個(gè)字符串時(shí),system.win將被設(shè)置為"CE",因此在檢測(cè)
Windows Mobile時(shí)可以使用這個(gè)值:
system.winMobile= (system.win=="CE");
南昌網(wǎng)絡(luò)公司技術(shù)人員不建議測(cè)試字符串中的"PPC"或"Smartphone",因?yàn)樵赪indows Mobile 5.0以后版本的瀏覽器中,這些記號(hào)已經(jīng)被移除了。不過(guò),一般情況下,只知道某個(gè)設(shè)備使用的是Windows Mobile也就足夠了。
完整代碼如下:
var client = function(){
//rendering engines
var engine = {
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
//complete version
ver: null
};
//browsers
var browser = {
//browsers
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,
//specific version
ver: null
};
//platform/device/OS
var system = {
win: false,
mac: false,
x11: false,
//mobile devices
iphone: false,
ipod: false,
ipad: false,
ios: false,
android: false,
nokiaN: false,
winMobile: false,
//game systems
wii: false,
ps: false
};
//detect rendering engines/browsers
var ua = navigator.userAgent;
if (window.opera){
engine.ver = browser.ver = window.opera.version();
engine.opera = browser.opera = parseFloat(engine.ver);
} else if (/AppleWebKit/(S+)/.test(ua)){
engine.ver = RegExp["$1"];
engine.webkit = parseFloat(engine.ver);
//figure out if it's Chrome or Safari
if (/Chrome/(S+)/.test(ua)){
browser.ver = RegExp["$1"];
browser.chrome = parseFloat(browser.ver);
} else if (/Version/(S+)/.test(ua)){
browser.ver = RegExp["$1"];
browser.safari = parseFloat(browser.ver);
} else {
//approximate version
var safariVersion = 1;
if (engine.webkit < 100){
safariVersion = 1;
} else if (engine.webkit < 312){
safariVersion = 1.2;
} else if (engine.webkit < 412){
safariVersion = 1.3;
} else {
safariVersion = 2;
}
browser.safari = browser.ver = safariVersion;
}
} else if (/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
engine.ver = browser.ver = RegExp["$1"];
engine.khtml = browser.konq = parseFloat(engine.ver);
} else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)){
engine.ver = RegExp["$1"];
engine.gecko = parseFloat(engine.ver);
//determine if it's Firefox
if (/Firefox/(S+)/.test(ua)){
browser.ver = RegExp["$1"];
browser.firefox = parseFloat(browser.ver);
}
} else if (/MSIE ([^;]+)/.test(ua)){
engine.ver = browser.ver = RegExp["$1"];
engine.ie = browser.ie = parseFloat(engine.ver);
}
//detect browsers
browser.ie = engine.ie;
browser.opera = engine.opera;
//detect platform
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//detect windows operating systems
if (system.win){
if (/Win(?:dows )?([^do]{2})s?(d+.d+)?/.test(ua)){
if (RegExp["$1"] == "NT"){
switch(RegExp["$2"]){
case "5.0":
system.win = "2000";
break;
case "5.1":
system.win = "XP";
break;
case "6.0":
system.win = "Vista";
break;
case "6.1":
system.win = "7";
break;
default:
system.win = "NT";
break;
}
} else if (RegExp["$1"] == "9x"){
system.win = "ME";
} else {
system.win = RegExp["$1"];
}
}
}
//mobile devices
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;
//windows mobile
if (system.win == "CE"){
system.winMobile = system.win;
} else if (system.win == "Ph"){
if(/Windows Phone OS (d+.d+)/.test(ua)){;
system.win = "Phone";
system.winMobile = parseFloat(RegExp["$1"]);
}
}
//determine iOS version
if (system.mac && ua.indexOf("Mobile") > -1){
if (/CPU (?:iPhone )?OS (d+_d+)/.test(ua)){
system.ios = parseFloat(RegExp.$1.replace("_", "."));
} else {
system.ios = 2; //can't really detect - so guess
}
}
//determine Android version
if (/Android (d+.d+)/.test(ua)){
system.android = parseFloat(RegExp.$1);
}
//gaming systems
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);
//return it
return {
engine: engine,
browser: browser,
system: system
};
}();
本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://www.gimmickmag.com 如轉(zhuǎn)載請(qǐng)注明出處!