javascript判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS的方法
更新時(shí)間：2015年02月05日 10:57:46 作者：喵小夕
這篇文章主要介紹了javascript判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS的方法,涉及移動(dòng)端設(shè)備的判斷及動(dòng)態(tài)加載技巧,需要的朋友可以參考下
本文實(shí)例講述了javascript判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS的方法。分享給大家供大家參考。具體分析如下：
javascript判斷不同web訪問(wèn)環(huán)境，主要針對(duì)移動(dòng)設(shè)備，提供相對(duì)應(yīng)的解析方案（判斷設(shè)備代碼直接copy騰訊網(wǎng)的）：
復(fù)制代碼 代碼如下:
// 判斷是否為移動(dòng)端運(yùn)行環(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)){
// 判斷訪問(wèn)環(huán)境是 Android|webOS|iPhone|iPod|BlackBerry 則加載以下樣式
setActiveStyleSheet("style_mobile_a.css");
}
else if(/iPad/i.test(navigator.userAgent)){
// 判斷訪問(wèn)環(huán)境是 iPad 則加載以下樣式
setActiveStyleSheet("style_mobile_iPad.css");
}
else{
// 判斷訪問(wèn)環(huán)境是 其他移動(dòng)設(shè)備 則加載以下樣式
setActiveStyleSheet("style_mobile_other.css");
}
}
catch(e){}
}
}
else{
// 如果以上都不是，則加載以下樣式
setActiveStyleSheet("style_mobile_no.css");
}
// 判斷完畢后加載樣式
function setActiveStyleSheet(filename){document.write("＜link href="+filename+" rel=stylesheet＞");}
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)){
// 判斷訪問(wèn)環(huán)境是 Android|webOS|iPhone|iPod|BlackBerry 則加載以下樣式
setActiveStyleSheet("style_mobile_a.css");
}
else if(/iPad/i.test(navigator.userAgent)){
// 判斷訪問(wèn)環(huán)境是 iPad 則加載以下樣式
setActiveStyleSheet("style_mobile_iPad.css");
}
else{
// 判斷訪問(wèn)環(huán)境是 其他移動(dòng)設(shè)備 則加載以下樣式
setActiveStyleSheet("style_mobile_other.css");
}
}
catch(e){}
}
}
else{
// 如果以上都不是，則加載以下樣式
setActiveStyleSheet("style_mobile_no.css");
}
// 判斷完畢后加載樣式
function setActiveStyleSheet(filename){document.write("＜link href="+filename+" rel=stylesheet＞");}
加載頁(yè)面：
復(fù)制代碼 代碼如下:
<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="手機(jī)頁(yè)面";
}else if(/iPad/i.test(navigator.userAgent)){
window.location.href="平板頁(yè)面";
}else{
window.location.href="其他移動(dòng)端頁(yè)面"
}
}catch(e){}
}
}
</script>
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="手機(jī)頁(yè)面";
}else if(/iPad/i.test(navigator.userAgent)){
window.location.href="平板頁(yè)面";
}else{
window.location.href="其他移動(dòng)端頁(yè)面"
}
}catch(e){}
}
}
</script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js如何判斷用戶(hù)是在PC端和還是移動(dòng)端訪問(wèn)
- 手機(jī)平板等移動(dòng)端適配跳轉(zhuǎn)URL的js代碼
- JS判斷移動(dòng)端訪問(wèn)設(shè)備并加載對(duì)應(yīng)CSS樣式
- js判斷移動(dòng)端是否安裝某款app的多種方法
- Javascript實(shí)現(xiàn)視頻輪播在pc端與移動(dòng)端均可
- JS如何判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS
- js檢測(cè)瀏覽器版本、核心、是否移動(dòng)端示例
- 基于JavaScript實(shí)現(xiàn)移動(dòng)端點(diǎn)擊圖片查看大圖點(diǎn)擊大圖隱藏
- 學(xué)習(xí)使用jquery iScroll.js移動(dòng)端滾動(dòng)條插件
- javascript html5移動(dòng)端輕松實(shí)現(xiàn)文件上傳
- javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
- 傾力總結(jié)40條常見(jiàn)的移動(dòng)端Web頁(yè)面問(wèn)題解決方案
相關(guān)文章
微信小程序中webview組件的使用與應(yīng)用場(chǎng)景詳解
web-view組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器,會(huì)自動(dòng)鋪滿(mǎn)整個(gè)小程序頁(yè)面,這篇文章主要介紹了微信小程序中的webview組件的基本使用方法、應(yīng)用場(chǎng)景、通信機(jī)制以及注意事項(xiàng),需要的朋友可以參考下2025-03-03
基于JavaScript實(shí)現(xiàn)百葉窗動(dòng)畫(huà)效果不只單純flas可以實(shí)現(xiàn)
看到這種百葉窗效果的動(dòng)畫(huà)，以為是用flash做的，下面通過(guò)本文給大家介紹基于JavaScript實(shí)現(xiàn)百葉窗動(dòng)畫(huà)效果，需要的朋友參考下吧2016-02-02
JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解
這篇文章主要介紹了JavaScript 中調(diào)用 Kotlin 方法實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序wx.request攔截器詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Less 安裝及基本用法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了js判斷密碼強(qiáng)度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
基于jQuery+PHP+Mysql實(shí)現(xiàn)在線拍照和在線瀏覽照片
本文通過(guò)php jquery和mysql三者相結(jié)合，實(shí)現(xiàn)web版在線拍照上傳并可在線瀏覽，下面給大家分享基于jQuery+PHP+Mysql實(shí)現(xiàn)在線拍照和在線瀏覽照片，需要的朋友可以參考下2015-09-09
基于Javascript實(shí)現(xiàn)的不重復(fù)ID的生成器
本文介紹了js生成一個(gè)不重復(fù)的ID的函數(shù)的進(jìn)化之路，具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
javascript使用substring實(shí)現(xiàn)的展開(kāi)與收縮文字功能示例
這篇文章主要介紹了javascript使用substring實(shí)現(xiàn)的展開(kāi)與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
js與jquery獲取父級(jí)元素,子級(jí)元素,兄弟元素的實(shí)現(xiàn)方法
本篇文章主要是對(duì)js與jquery獲取父級(jí)元素,子級(jí)元素,兄弟元素的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01