本文整理了四种使用JavaScript检测客户端设备类型并实现自动跳转的代码实例。从基础的UserAgent匹配到封装完善的浏览器对象判断，涵盖了iPad、iPhone、Android及各类手机浏览器的识别逻辑，帮助开发者根据实际需求选择最合适的跳转方案。
JavaScript判断客户端设备类型并跳转移动端页面的四种实现方案
第一个示例采用了较为直接且简单的实现方式，主要侧重于功能的基本可用性，但在设备类型的细分判断上相对简略。
<script type="text/javascript">
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="3g.php";
}
</script>第二个示例代码结构更加规范，其核心逻辑基于一个通用的浏览器检测函数，便于在此基础上扩展其他功能特性。
<script>
var pc_style = ""
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
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,
ua: u
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.mobile && !browser.versions.iPad) {
this.location = "此处输入跳转微站首页地址";
}
</script>第三个示例在基础检测之上增加了更多辅助功能，提升了代码的健壮性和适用场景的覆盖范围。
<!--智能手机判断开始-->
<!--
<script type = "text/javascript" language = "javascript" >
Function.prototype.bind = function (bindObj, args) {
var _self = this;
return function () {
return _self.apply(bindObj, [].concat(args))
}
};
function $(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var browser = {
versions : function () {
var u = navigator.userAgent,
app = navigator.appVersion;
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/),
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,
QQbrw : u.indexOf('MQQBrowser') > -1,
ucLowEnd : u.indexOf('UCWEB7.') > -1,
ucSpecial : u.indexOf('rv:1.2.3.4') > -1,
ucweb : function () {
try {
return parseFloat(u.match(/ucweb\d+\.\d+/gi).toString().match(/\d+\.\d+/).toString()) >= 8.2
} catch (e) {
if (u.indexOf('UC') > -1) {
return true;
} else {
return false;
}
}
}
(),
Symbian : u.indexOf('Symbian') > -1,
ucSB : u.indexOf('Firefox/1.') > -1
};
}
()
}
var _gaq = _gaq || [];
(function (win, browser, undefined) {
var rf = document.referrer;
if (rf === "" || rf.toLocaleLowerCase().indexOf(".xiu.com") === -1) {
var defaultJumpDomain = "";
if (defaultJumpDomain == "www") {
return;
}
if (defaultJumpDomain == "m") {
window.location.href = "http://wap.xiu.com/?from=pc";
return;
}
if (screen == undefined || screen.width < 810) {
if (browser.versions.iPad == true) {
return;
}
if (browser.versions.webKit == true || browser.versions.mobile == true || browser.versions.ios == true || browser.versions.iPhone == true || browser.versions.ucweb == true || browser.versions.ucSpecial == true) {
win.location.href = "http://wap.xiu.com/?from=pc";
return;
}
if (browser.versions.Symbian) {
win.location.href = "http://wap.xiu.com/";
}
}
}
})(window, browser);
</script>
-->
<!--智能手机判断结束-->
第四个示例以简洁高效著称，本站推荐此方案。若读者有更具优势的实现代码，欢迎分享交流。
<script type="text/javascript">
var browser = {
versions : function () {
var u = navigator.userAgent,
app = navigator.appVersion;
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/),
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,
QQbrw : u.indexOf('MQQBrowser') > -1,
weiXin : u.indexOf('MicroMessenger') > -1,
ucLowEnd : u.indexOf('UCWEB7.') > -1,
ucSpecial : u.indexOf('rv:1.2.3.4') > -1,
ucweb : function () {
try {
return parseFloat(u.match(/ucweb\d+\.\d+/gi).toString().match(/\d+\.\d+/).toString()) >= 8.2
} catch (e) {
if (u.indexOf('UC') > -1) {
return true;
} else {
return false;
}
}
}
(),
Symbian : u.indexOf('Symbian') > -1,
ucSB : u.indexOf('Firefox/1.') > -1
};
}
(),
liulanqi : navigator.userAgent
}
if (browser.versions.QQbrw){
document.write("qq浏览器");
}else
{
document.write("其它浏览器"+browser.liulanqi);
}
</script>