js判断安卓还是ios

分析 User-Agent (最推荐)

这是最标准、最可靠的方法，因为无论是移动端 App 内的 WebView 还是手机浏览器，都会在 User-Agent 中明确标识其操作系统。

原理

不同的操作系统在 User-Agent 中有不同的特征字符串：

• Android: User-Agent 字符串中通常包含 "Android"。
• iOS: User-Agent 字符串中通常包含 "iPhone", "iPad" 或 "iPod"。

我们可以使用正则表达式来匹配这些特征。

代码实现

/**
 * 判断当前设备是 Android, iOS 还是其他
 * @returns {string} 'android', 'ios', 'other'
 */
function getDeviceType() {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // 检查是否为 Android 设备
  if (/android/i.test(userAgent)) {
    return 'android';
  }
  // 检查是否为 iOS 设备
  // 注意：'iPad' 的 User-Agent 也包含 'CPU OS ...'，所以需要优先判断
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    // window.MSStream 是一个微软的特有属性，用于排除 Windows Phone 上的 Edge 浏览器
    return 'ios';
  }
  // 其他设备
  return 'other';
}
// 使用示例
const deviceType = getDeviceType();
if (deviceType === 'android') {
  console.log('当前设备是 Android');
  // 在这里执行针对 Android 的代码
} else if (deviceType === 'ios') {
  console.log('当前设备是 iOS');
  // 在这里执行针对 iOS 的代码
} else {
  console.log('当前设备是其他');
  // 在这里执行通用代码
}

代码解析

1. navigator.userAgent: 获取浏览器的完整用户代理字符串，"Mozilla/5.0 (Linux; Android 10; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36"。
2. navigator.vendor: 获取浏览器的供应商名称，"Google Inc."。
3. window.opera: 获取 Opera 浏览器的信息。
4. if (/android/i.test(userAgent)): 使用正则表达式 /android/i 进行不区分大小写的匹配。userAgent 中包含 "android"，则返回 'android'。
5. if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream): 这个判断稍微复杂一点。
   • /iPad|iPhone|iPod/ 匹配这三个设备的关键字。
   • !window.MSStream 是一个非常重要的兼容性处理，旧版的 Windows Phone 浏览器（基于 Trident 内核）其 userAgent 也可能包含类似 iPhone 的字符串，但它没有 window.MSStream 属性，加上这个条件可以有效地将其排除，避免误判。

使用 React Hook (React 项目中)

如果你在 React 项目中，可以将上述逻辑封装成一个自定义 Hook，这样可以在任何组件中方便地调用。

// src/hooks/useDeviceType.js
import { useState, useEffect } from 'react';
function getDeviceType() {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (/android/i.test(userAgent)) {
    return 'android';
  }
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return 'ios';
  }
  return 'other';
}
export function useDeviceType() {
  const [deviceType, setDeviceType] = useState(getDeviceType());
  useEffect(() => {
    // 在组件挂载时设置一次，因为设备类型不会改变
    // 如果你的应用支持 PWA，可以在 resize 事件中重新检查，但这种情况很少见
    const handleResize = () => {
      setDeviceType(getDeviceType());
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return deviceType;
}

在组件中使用：

import React from 'react';
import { useDeviceType } from './hooks/useDeviceType';
function MyComponent() {
  const deviceType = useDeviceType();
  return (
    <div>
      <h1>设备检测示例</h1>
      {deviceType === 'android' && <p>您正在使用 Android 设备。</p>}
      {deviceType === 'ios' && <p>您正在使用 iOS 设备。</p>}
      {deviceType === 'other' && <p>您正在使用其他设备。</p>}
    </div>
  );
}
export default MyComponent;

备用方案 (检测特定 API)

在某些情况下,User-Agent 可能会被修改或无法获取（例如在非常受限的环境中），这时可以尝试检测平台特有的 API。

检测 iOS

iOS 设备上的 Safari 浏览器有一个全局的 webkit 对象，其中包含 messageHandlers，这是 iOS App 和 WebView 通信的常用方式，虽然这不是一个 100% 可靠的检测方法，但可以作为补充。

function isIOS() {
  // 方法1：检查 User-Agent
  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    return true;
  }
  // 方法2：检查是否存在 iOS 特有的 API (备用)
  if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) {
    // 这是检测 iPad 在 iPadOS 13+ 上的一个有效方法
    return true;
  }
  return false;
}

检测 Android

Android 设备上没有像 iOS 那样明确的 API，User-Agent 仍然是首选。

总结与最佳实践

核心建议：

1. 首选方法一：在绝大多数情况下，通过分析 User-Agent 是判断安卓和 iOS 的最佳方式。
2. 代码要健壮：像示例中那样，注意处理 window.MSStream 这样的边缘情况，避免误判。
3. 考虑未来：随着浏览器技术的发展，User-Agent 的格式可能会变，但只要主流浏览器保持对 "Android" 和 "iPhone/iPad" 的标识，这个方法就依然是可靠的。

希望这些信息能帮到你！