JavaScript判断页面访问设备类型:电脑与移动端的三种实现方案
本文整理了JavaScript判断页面访问方式的三种常见方法。通过解析navigator.userAgent属性,利用正则表达式匹配特定标识符(如iPhone、Android、iPad等),可识别用户是否使用移动终端。方案涵盖直接跳转逻辑与浏览器内核信息提取,帮助开发者实现针对不同设备的差异化页面展示或重定向功能。
基于UserAgent的设备识别方法
第一种方法主要通过定义一个名为的函数来实现设备识别。该函数首先获取并转换浏览器用户代理字符串为小写,随后利用正则表达式逐一匹配常见的移动设备标识,包括iPad、iPhone OS、Midp、UC浏览器特定版本及Android等。通过判断这些标识是否存在,函数可以确定当前访问设备的具体类型。
<script type="text/javascript">
function browserRedirect(type) {
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp= sUserAgent.match(/midp/i) == "midp";
var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid= sUserAgent.match(/android/i) == "android";
var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.href= '/ctcshop/m/rhylogin.shtml';
//alert("这是手机");
} else {
window.location= '/etrade/login.shtml?ref_url=/rhy/index.html';
//alert("这是电脑");
}
}
</script>
//方法1:
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
非移动终端跳转逻辑
第二种方法同样基于函数,其核心逻辑是判断当前设备是否为非移动终端。代码中定义了包含多种移动设备关键词的数组,遍历用户代理字符串进行匹配。若未检测到任何移动设备特征,则判定为电脑或其他非移动设备,并执行页面跳转至指定B页面的操作。此方法适用于需要强制将PC用户引导至特定版本的场景。
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
window.location.href=B页面;
}
}
browserRedirect();
浏览器内核与语言信息提取
第三种方法采用对象字面量形式封装浏览器检测功能,定义在中。该方法不仅检测是否为移动终端,还详细区分了Trident(IE内核)、Presto(Opera内核)、WebKit(苹果/谷歌内核)及Gecko(火狐内核)等浏览器引擎类型。此外,它还通过navigator属性获取并输出当前浏览器的语言设置,提供了更全面的浏览器环境信息。
<script type="text/javascript">
var browser = {
versions : function() {
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident : u.indexOf('Trident') > -1, //IE内核
presto : u.indexOf('Presto') > -1, //opera内核
webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile : !!u.match(/AppleWebKit.*Mobile.*/)
|| !!u.match(/AppleWebKit/), //是否为移动终端
ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp : u.indexOf('Safari') == -1,//是否web应该程序,没有头部与底部
google:u.indexOf('Chrome')>-1
};
}(),
language : (navigator.browserLanguage || navigator.language).toLowerCase()
}
document.writeln("语言版本: "+browser.language);
document.writeln(" 是否为移动终端: "+browser.versions.mobile);
</script>
以上即为判断页面访问方式的相关资料整理,后续将继续补充相关内容,感谢大家对本站的支持!
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
JavaScript新手常犯的编码错误与最佳实践指南
2026-11-04 22:12:38
为什么箭头函数不能直接用作JS立即执行函数
2026-11-04 21:07:26
