JavaScript 动态识别 PC 与移动浏览器的实现方法
作者:微光时间:2026-10-30 14:20:17浏览:547
本文介绍利用 JavaScript 动态判断浏览器是 PC 还是移动端的实用技巧。通过解析 navigator.userAgent 属性,代码可识别 Trident、Presto、WebKit 等内核,并检测是否为移动终端、iPhone 或 iPad。该方法简单有效,适用于需要根据设备类型调整页面显示或行为的场景。
JS 动态识别 PC 与移动浏览器的实现方法
这是一个实用的前端小知识,来源于网络整理,实际应用中非常有效。
核心功能在于动态判断当前访问的浏览器属于 PC 端还是移动端设备。
<script>
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应该程序,没有头部与底部
};
}()
}
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>
该实现方式逻辑清晰,具有一定的趣味性。
以上是关于 JS 动态判断 PC 和手机浏览器的相关资料整理,后续如有新内容将继续补充,感谢支持。
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
