JS判斷移動端訪問設備并加載對應CSS樣式
更新時間:2014年06月13日 10:15:18 投稿:whsnow
JS判斷不同web訪問環(huán)境,主要針對移動設備,提供相對應的解析方案,本例是加載不同的css樣式
JS判斷不同web訪問環(huán)境,主要針對移動設備,提供相對應的解析方案(判斷設備代碼直接copy騰訊網(wǎng)的)
// 判斷是否為移動端運行環(huán)境
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)){
// 判斷訪問環(huán)境是 Android|webOS|iPhone|iPod|BlackBerry 則加載以下樣式
setActiveStyleSheet("style_mobile_a.css");
}
else if(/iPad/i.test(navigator.userAgent)){
// 判斷訪問環(huán)境是 iPad 則加載以下樣式
setActiveStyleSheet("style_mobile_iPad.css");
}
else{
// 判斷訪問環(huán)境是 其他移動設備 則加載以下樣式
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>
復制代碼 代碼如下:
// 判斷是否為移動端運行環(huán)境
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)){
// 判斷訪問環(huán)境是 Android|webOS|iPhone|iPod|BlackBerry 則加載以下樣式
setActiveStyleSheet("style_mobile_a.css");
}
else if(/iPad/i.test(navigator.userAgent)){
// 判斷訪問環(huán)境是 iPad 則加載以下樣式
setActiveStyleSheet("style_mobile_iPad.css");
}
else{
// 判斷訪問環(huán)境是 其他移動設備 則加載以下樣式
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>
相關文章
JS利用?clip-path?實現(xiàn)動態(tài)區(qū)域裁剪功能
這篇文章主要介紹了JS利用?clip-path?實現(xiàn)動態(tài)區(qū)域裁剪功能,文中主要通過使用 box-shadow 實現(xiàn),代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12慕課網(wǎng)題目之js實現(xiàn)抽獎系統(tǒng)功能
這篇文章主要為大家詳細介紹了慕課網(wǎng)題目之js抽獎系統(tǒng)功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09