如何检测React Native网页版是否在手机端浏览器中打开

1. 解析浏览器User Agent字符串 #

React Native Web的Platform.OS仅返回"web"，无法区分浏览器运行的底层系统，这时可以直接通过浏览器的navigator.userAgent字段提取系统信息。

实现工具函数：

const getUnderlyingOS = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  
  if (userAgent.includes('iphone') || userAgent.includes('ipad') || userAgent.includes('ipod')) {
    return 'ios';
  } else if (userAgent.includes('android')) {
    return 'android';
  } else if (userAgent.includes('windows')) {
    return 'windows';
  } else if (userAgent.includes('macintosh')) {
    return 'macos';
  } else {
    return 'unknown';
  }
};

在组件中使用：

import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [os, setOs] = useState('unknown');

  useEffect(() => {
    setOs(getUnderlyingOS());
  }, []);

  return (
    <div>
      {os === 'ios' && <p>当前运行在iOS浏览器</p>}
      {os === 'android' && <p>当前运行在Android浏览器</p>}
      {os === 'windows' && <p>当前运行在Windows浏览器</p>}
    </div>
  );
};

注意：User Agent可能被篡改或部分浏览器伪装，该方法适用于大多数常规场景，但不是绝对可靠。

2. 使用Expo Device库（Expo项目专属） #

如果是Expo开发的项目，可以直接用expo-device库获取底层操作系统信息，它在Web端会返回实际运行的系统名称。

首先安装依赖：

npx expo install expo-device

然后在代码中使用：

import * as Device from 'expo-device';
import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [osName, setOsName] = useState('');

  useEffect(() => {
    setOsName(Device.osName);
  }, []);

  return (
    <p>当前底层系统：{osName}</p>
  );
};

Device.osName会直接返回如"iOS"、"Android"、"Windows"之类的系统名称，无需自行解析User Agent，可靠性更高。

额外提示 #

如果需求只是区分移动端和桌面端（而非具体OS），可以直接用更简便的方式：

• React Native方式：import { Dimensions } from 'react-native'; const isMobile = Dimensions.get('window').width < 768;
• CSS方式：@media (max-width: 767px) { /* 移动端样式 */ }

内容的提问来源于stack exchange，提问作者user27379482