JavaScript实现移动端设备识别与CSS动态加载方案

移动端设备识别与CSS动态加载方案

本文详细介绍一种通过JavaScript识别移动端访问设备并动态解析对应CSS样式表的实现方法，供开发者参考使用。

该方案主要针对移动Web访问环境，提供相应的设备识别与样式解析策略。其中设备判断的核心代码可直接参考腾讯网的实现逻辑。

// 检测当前运行环境是否为移动端
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＞");}

基于URL参数的移动端页面跳转实现

页面跳转实现方式如下：

<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>

希望上述关于JavaScript程序设计的分享能对读者有所帮助。