JavaScript判断页面访问设备类型:电脑与移动端的三种实现方案

作者:青柠

时间:2026-10-30

浏览:180

本文整理了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>

以上即为判断页面访问方式的相关资料整理,后续将继续补充相关内容,感谢大家对本站的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章