JS判斷移動端訪問設備并加載對應CSS樣式

2019-11-20 14:29:26

字體：大中小

來源：轉載

供稿：網友

JS判斷不同web訪問環境，主要針對移動設備，提供相對應的解析方案（判斷設備代碼直接copy騰訊網的）

 
// 判斷是否為移動端運行環境 

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 

if(window.location.href.indexOf("?mobile")<0){ 

try{ 

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ 

// 判斷訪問環境是 Android|webOS|iPhone|iPod|BlackBerry 則加載以下樣式 

setActiveStyleSheet("style_mobile_a.css"); 

} 

else if(/iPad/i.test(navigator.userAgent)){ 

// 判斷訪問環境是 iPad 則加載以下樣式 

setActiveStyleSheet("style_mobile_iPad.css"); 

} 

else{ 

// 判斷訪問環境是 其他移動設備 則加載以下樣式 

setActiveStyleSheet("style_mobile_other.css"); 

} 

} 

catch(e){} 

} 

} 

else{ 

// 如果以上都不是，則加載以下樣式 

setActiveStyleSheet("style_mobile_no.css"); 

} 

// 判斷完畢后加載樣式 

function setActiveStyleSheet(filename){document.write("＜link href="+filename+" rel=stylesheet＞");}

加載頁面

復制代碼代碼如下:

 
<script type="text/javascript"> 
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 
if(window.location.href.indexOf("?mobile")<0){ 
try{ 
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ 
window.location.href="手機頁面"; 
}else if(/iPad/i.test(navigator.userAgent)){ 
window.location.href="平板頁面"; 
}else{ 
window.location.href="其他移動端頁面" 
} 
}catch(e){} 
} 
} 
</script> 