本文介绍利用JavaScript检测移动设备类型并动态加载对应CSS样式表的方法。通过正则表达式匹配navigator.userAgent，区分Android、iPhone、iPad及其他移动设备，分别加载不同的样式文件。同时提供基于URL参数控制的页面跳转方案，实现不同终端的差异化展示。
移动端设备识别与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程序设计的分享能对读者有所帮助。