JavaScript判断客户端设备类型的两种实现方案
本文介绍了使用JavaScript判断客户端是手机还是PC的两种常见方法。第一种通过遍历UserAgent关键字列表判断是否为移动设备;第二种通过正则匹配特定浏览器特征进行页面重定向。文章提供了完整的代码示例及百度Uaredirect函数的逻辑解析,帮助开发者实现移动端与PC端的自动适配与跳转。
基于UserAgent关键字的设备识别
第一种方法主要通过检查 navigator.userAgent 属性来识别设备类型。代码定义了一个 IsPC 函数,初始化一个包含常见移动设备标识(如 Android、iPhone、SymbianOS、Windows Phone、iPad、iPod)的数组。遍历该数组,若 UserAgent 中包含任一标识,则判定为非 PC 设备(flag 设为 false),否则返回 true。
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;
}
基于正则匹配的重定向逻辑
第二种方法侧重于浏览器重定向逻辑。通过获取小写的 UserAgent 字符串,使用正则表达式匹配多种移动设备特征,包括 iPad、iPhone OS、Midp、UC浏览器特定版本、Android、Windows CE 及 Windows Mobile。若未匹配到任何移动设备特征,则执行页面跳转至指定目标页面(B页面)。
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();
百度Uaredirect跳转函数解析
第三种参考了百度的判断代码逻辑,主要涉及 uaredirect 函数。该函数用于处理移动端与PC端的页面跳转,支持子域名判断逻辑,可根据参数配置将PC端链接转换为移动端链接格式。
function uaredirect(f) {
try {
if (document.getElementById("bdmark") != null) {
return
}
var b = false;
if (arguments[1]) {
var e = window.location.host;
var a = window.location.href;
if (isSubdomain(arguments[1], e) == 1) {
f = f + "/#m/" + a;
b = true
} else {
if (isSubdomain(arguments[1], e) == 2) {
f = f + "/#m/" + a;
b = true
} else {
f = a;
b = false
}
}
} else {
b = true
}
if (b) {
var c = window.location.hash;
if (!c.match("fromapp")) {
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i))) {
location.replace(f)
}
}
}
} catch(d) {}
}
function isSubdomain(c, d) {
this.getdomain = function(f) {
var e = f.indexOf("://");
if (e > 0) {
var h = f.substr(e + 3)
} else {
var h = f
}
var g = /^www\./;
if (g.test(h)) {
h = h.substr(4)
}
return h
};
if (c == d) {
return 1
} else {
var c = this.getdomain(c);
var b = this.getdomain(d);
if (c == b) {
return 1
} else {
c = c.replace(".", "\\.");
var a = new RegExp("\\." + c + "$");
if (b.match(a)) {
return 2
} else {
return 0
}
}
}
};
使用方法示例如下: <SCRIPT type=text/javascript>uaredirect("手机站","WEB站");</SCRIPT>
简易字符串匹配方案
此外,还有一种基于 navigator.userAgent 直接匹配 "Mobile" 或 "mobile" 字符串的方法。若匹配成功且当前URL不包含 "wap",则跳转至指定的WAP地址;若匹配失败但URL包含 "3g" 或 "wap",同样执行跳转。此方法逻辑相对简单,可作为参考。
var browser_class = navigator.userAgent;
var browser_class_name1 = browser_class.match("Mobile");
var browser_class_name2 = browser_class.match("mobile");
var location_url = window.location.href;
if (browser_class_name1 != null || browser_class_name2 != null) {
if (location_url.match("wap") == null) {
window.location.href = "http://wap.xxxx.com";
}
} else {
if (location_url.match("3g") != null || location_url.match("wap") != null) {
window.location.href = "http://wap.xxxx.com";
}
}
文章介绍完毕,具体实现细节可参考上方提供的代码示例及相关技术文档。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
