移动端检测 设备识别：如何使用JS判断客户端是否为iOS或Android手机

📱 移动端检测 | 设备识别：如何使用JS判断iOS或Android手机

最新消息 📢（2025年8月）
随着移动设备碎片化加剧，精准识别用户设备类型对提升用户体验至关重要，最新数据显示，全球iOS与Android设备占比分别达28%和71%，而华为HarmonyOS等新兴系统也在快速崛起，我们就来聊聊如何用JavaScript轻松判断用户是否在用iOS或Android手机！

🔍 为什么要做设备识别？

在开发响应式网页或混合应用时,我们常需要针对不同操作系统（如iOS和Android）做差异化处理，

• 调整UI布局以适配不同风格的导航栏
• 针对iOS的弹性滚动或Android的返回键行为优化交互
• 避免某些平台不支持的API（如iOS的Web Push限制）

💻 核心方法：navigator.userAgent

JavaScript通过浏览器的userAgent字符串提供设备信息，虽然它可能被篡改，但在大多数场景下足够可靠。

1️⃣ 判断Android设备

const isAndroid = /Android/i.test(navigator.userAgent);
if (isAndroid) {
    console.log("👋 你好，Android用户！");
    // 针对Android的代码逻辑
}

关键点：

• 安卓设备的userAgent通常包含Android关键词
• 注意华为鸿蒙设备可能同时包含Android和HarmonyOS

2️⃣ 判断iOS设备

const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
if (isIOS) {
    console.log("🍎 欢迎，苹果用户！");
    // 针对iOS的代码逻辑
}

注意：

• iPad的userAgent可能同时匹配Macintosh（M1芯片后）
• 需额外判断iPadOS：

  const isIPad = /iPad|Macintosh/i.test(navigator.userAgent) && 
                navigator.maxTouchPoints > 1;

🛠️ 进阶技巧

🌐 区分浏览器与WebView

在App内嵌网页时,可能需要特殊处理：

const isInWeChat = /MicroMessenger/i.test(navigator.userAgent);
const isInApp = /(WebView|AppName)/i.test(navigator.userAgent);

📱 检测全面屏手机

通过屏幕比例辅助判断新型设备：

const isNotchScreen = 
    window.screen.width / window.screen.height > 0.56 && 
    (isIOS || isAndroid);

⚠️ 注意事项

1. 不要完全依赖UA：某些浏览器允许修改UA字符串
2. 动态检测：建议在页面加载时检测并存储结果，避免重复计算
3. 备选方案：可结合window.screen、触摸事件等交叉验证

🎯 完整代码示例

function detectDevice() {
    const UA = navigator.userAgent;
    const isIOS = /iPhone|iPad|iPod/i.test(UA);
    const isAndroid = /Android/i.test(UA);
    return {
        isIOS,
        isAndroid,
        isMobile: isIOS || isAndroid,
        isIPad: /iPad|Macintosh/i.test(UA) && navigator.maxTouchPoints > 1
    };
}
const device = detectDevice();
console.log("📱 设备信息：", device);

🚀 2025年新趋势

随着折叠屏设备普及,未来可能需要增加对isFoldable的检测；而苹果Vision Pro等AR设备也可能带来新的UA特征，建议开发者持续关注W3C相关标准更新！

希望这篇指南能帮你轻松搞定设备识别！如果有其他妙招，欢迎分享~ ✨