本文提供一段基于 JavaScript 的检测代码,用于识别移动终端浏览器的内核类型(如 Trident、Webkit、Gecko)及具体设备信息(iOS、Android、iPhone、iPad)。通过解析 navigator.userAgent 和 appVersion,可判断是否为移动终端、Web App 状态及语言设置,适用于移动端适配场景。
JavaScript 移动终端浏览器检测实现
具体逻辑细节已包含在代码注释中,此处不再赘述,直接展示实现代码。
代码如下:
<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应用程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
document.writeln("语言版本: " + browser.language);
document.writeln(" 是否为移动终端: " + browser.versions.mobile);
document.writeln(" ios终端: " + browser.versions.ios);
document.writeln(" android终端: " + browser.versions.android);
document.writeln(" 是否为iPhone: " + browser.versions.iPhone);
document.writeln(" 是否iPad: " + browser.versions.iPad);
document.writeln(navigator.userAgent);
</script>
常见的移动终端浏览器版本信息基本涵盖于此,供有需要的开发者参考。