本文分析JS判断PC端与移动端跳转的常见错误，指出仅匹配AppleWebKit或Mobile关键字可能导致误判。提供完整的UserAgent检测逻辑，包括PC跳转移动端和移动端跳转PC端的正确代码实现，确保设备识别准确。
PC端与移动端跳转的常见错误分析
网络上流传的许多设备判断代码存在缺陷，要么逻辑过于复杂，要么覆盖不全。曾有案例显示，使用苹果浏览器访问已做识别跳转的PC端页面时，会自动错误地跳转到移动端网页。经过后续测试才发现这是判断逻辑不完善导致的。
通过打印输出可以查看是否为移动终端的结果，例如：document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>"); //打印出来 true
因此，在那些不完整的代码版本中，第一层的if判断条件往往始终返回true，导致所有访问都被视为移动端访问。
造成这一问题的根本原因在于网上流传的判断逻辑存在漏洞。
常见的错误判断写法为：mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit), //是否为移动终端
这种判断方式不够严谨，正是导致上述误跳转现象的原因。
下面为大家分享网站开发中常用的正确判断代码。
PC端与移动端自动跳转代码实现
PC端自动跳转至移动端的实现方案
(function() {
if (/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
var siteName = window.location.pathname;
if (url.indexOf("?pc") < 0) {
try {
if (typeof siteName !== "undefined") {
window.location.href = "https://m.jb51.net" + siteName
}
} catch (e) {}
}
}
})();移动端自动跳转至PC端的实现方案
;(function() {
var reWriteUrl = function(url) {
if (url) {
var Splits = url.split("/"),
siteName = window.location.pathname;
if (typeof siteName !== "undefined") {
return "https://www.jb51.net" + siteName
}
}
};
if (!/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
var url = window.location.href;
var pathname = window.location.pathname;
if (url.indexOf("?m") < 0) {
try {
window.location.href = reWriteUrl(url)
} catch(e) {}
}
}
})();正确的设备判断逻辑与完整代码
正确的设备判断逻辑应该如下所示：
mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0, //是否为移动终端测试程序代码示例
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1
}
} (),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
document.writeln("语言版本: "+browser.language+"</br>");
document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");
document.writeln(" ios终端: "+browser.versions.ios+"</br>");
document.writeln(" android终端: "+browser.versions.android+"</br>");
document.writeln(" 是否为iPhone: "+browser.versions.iPhone+"</br>");
document.writeln(" 是否iPad: "+browser.versions.iPad+"</br>");
document.writeln(navigator.userAgent+"</br>");
适用于实际项目的完整版代码
/*
*
* 判断PC端与WAP端
*/
var mobile_bs = {
versions: function() {
var u = navigator.userAgent;
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/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0, //是否为移动终端
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应该程序，没有头部与底部
}
} ()
};
if (mobile_bs.versions.mobile) {
if (mobile_bs.versions.android || mobile_bs.versions.iPhone || mobile_bs.versions.iPad || mobile_bs.versions.ios) {
window.location.href = "移动端网址";
}
};
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！