JavaScript判断客户端设备类型的两种实现方案

作者:异步漫步时间:2026-10-28 09:08:38浏览:68

本文介绍了使用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";
 }
}

文章介绍完毕,具体实现细节可参考上方提供的代码示例及相关技术文档。

作者最新文章