JavaScript检测设备是移动端还是PC端的方法
在前端开发中，经常需要根据用户使用的设备类型（移动端或PC端）来调整页面布局、加载不同的资源或者展示不同的交互逻辑。JavaScript提供了多种方式可以检测设备类型，下面介绍几种常用的实现方案。
方案一：通过User-Agent检测
浏览器的User-Agent字符串会包含设备、操作系统、浏览器内核等相关信息，我们可以通过正则匹配User-Agent中是否包含移动端设备的特征标识来判断设备类型。这是目前使用最广泛的一种检测方式。
/**
* 通过User-Agent检测设备是否为移动端
* @returns {boolean} true表示移动端，false表示PC端
*/
function isMobileByUA() {
const ua = navigator.userAgent.toLowerCase();
// 匹配常见移动端设备的特征字符串
const mobileRegex = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
return mobileRegex.test(ua);
}
// 使用示例
if (isMobileByUA()) {
console.log('当前设备是移动端');
} else {
console.log('当前设备是PC端');
}这种方式的优点是兼容性较好，几乎所有浏览器都支持读取navigator.userAgent。但也存在一定局限性：User-Agent字符串可以被用户手动修改，而且部分平板设备可能会同时命中移动端和PC端的特征，需要额外调整正则匹配规则。
方案二：通过屏幕宽度检测
移动端设备的屏幕宽度通常远小于PC端设备，我们可以通过判断屏幕的宽度阈值来区分设备类型。这种方式实现简单，不需要依赖浏览器特征。
/**
* 通过屏幕宽度检测设备是否为移动端
* 通常认为宽度小于768px的为移动端设备
* @returns {boolean} true表示移动端，false表示PC端
*/
function isMobileByWidth() {
// 获取屏幕的逻辑宽度，不包含滚动条
const screenWidth = window.innerWidth || document.documentElement.clientWidth;
// 768px是常见的移动端和PC端的断点，可根据实际需求调整
return screenWidth < 768;
}
// 使用示例
if (isMobileByWidth()) {
console.log('当前设备是移动端');
} else {
console.log('当前设备是PC端');
}这种方式的缺点是如果用户手动调整浏览器窗口大小，比如把PC端浏览器窗口拉得很小，也会被判为移动端，适合只需要粗略区分设备、且不需要考虑窗口缩放的场景。
方案三：结合多种特征的综合检测
为了提升检测的准确性，我们可以将User-Agent检测和屏幕宽度检测结合起来，同时还可以加入触摸事件支持的判断，进一步优化检测结果。
/**
* 综合多种特征检测设备是否为移动端
* @returns {boolean} true表示移动端，false表示PC端
*/
function isMobileComprehensive() {
// 优先判断是否有触摸事件支持，移动端设备基本都支持触摸
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
// User-Agent检测
const ua = navigator.userAgent.toLowerCase();
const mobileRegex = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
const isMobileUA = mobileRegex.test(ua);
// 屏幕宽度检测
const screenWidth = window.innerWidth || document.documentElement.clientWidth;
const isSmallScreen = screenWidth < 768;
// 多个条件满足任意两个即判定为移动端，可根据实际需求调整判断逻辑
const matchCount = [isTouchDevice, isMobileUA, isSmallScreen].filter(Boolean).length;
return matchCount >= 2;
}
// 使用示例
if (isMobileComprehensive()) {
console.log('当前设备是移动端');
} else {
console.log('当前设备是PC端');
}综合检测的方式可以覆盖更多场景，减少单一检测的误判情况，实际项目中可以根据需求灵活调整判断逻辑和阈值。
注意事项
- 检测设备类型的结果仅供参考，不要完全依赖检测结果做核心功能逻辑的判断，建议同时提供手动切换设备模式的入口，方便用户自主选择。
- 如果项目已经引入了比如Bootstrap、Element Plus等前端框架，部分框架已经内置了设备检测的工具方法，可以直接使用，无需重复实现。
- 随着新设备、新浏览器的出现，User-Agent的特征可能会发生变化，如果使用User-Agent检测的方式，建议定期维护匹配的正则规则。
JavaScript设备检测移动端判断User-Agent屏幕尺寸前端适配 本作品最后修改时间：2026-05-23 23:24:25