主要用到了下面两个 npm 包
-
react-device-detect: 设备类型, 操作系统, 浏览器类型检测- 注意: 该包只能用于 React 项目
-
check-platform: 检测国内App平台(微信, 支付宝...)
react-device-detect 使用
npm i react-device-detect
import {
isAndroid,
isChrome,
isDesktop,
isEdge,
isFirefox,
isIE,
isIOS,
isMacOs,
isMobile,
isMobileOnly,
isMobileSafari,
isSafari,
isTablet,
isWindows,
} from 'react-device-detect';
操作系统判断
if (isAndroid) {
// 安卓系统(安卓手机, 安卓平板...)
}
if (isIOS) {
// iOS系统(iPhone, iPad, iPod...)
}
if (isMacOs) {
// macOS系统(Mac, MacBook, MacBook Pro...)
}
if (isWindows) {
// Windows系统
}
设备类型判断
if (isMobileOnly) {
// 手机
}
if (isTablet) {
// 平板(iPad, 安卓平板...)
}
if (isMobile) {
// 移动设备(手机, 平板...)
}
if (isDesktop) {
// 桌面端浏览器
}
浏览器类型判断
if (isChrome) {
// Chrome
}
if (isSafari) {
// Safari
}
if (isIE) {
// IE
}
if (isEdge) {
// Edge || Edge(chromium内核)
}
if (isMobileSafari) {
// 移动设备(iPhone, iPad...)的Safari
}
if(isFirefox){
// Firefox
}
常用组合
if (isAndroid && isMobileOnly) {
// 安卓手机
}
if (isIOS && isMobileOnly) {
// iPhone
}
Next.js App Router 服务端组件下如何使用 react-device-detect?
服务端组件中, 需要手动调用 getSelectorsByUserAgent 解析 user-agent
import { headers } from 'next/headers';
import { getSelectorsByUserAgent } from 'react-device-detect';
type DeviceDetectSSR = {
isMacOs?: boolean;
isMobile?: boolean;
};
/** 服务端组件判断设备类型 */
export function deviceDetectorSSR(): DeviceDetectSSR {
const headersReadOnly = headers();
const userAgent = headersReadOnly.get('user-agent');
const { isMacOs, isMobile } = userAgent && getSelectorsByUserAgent(userAgent);
return {
isMacOs,
isMobile,
// ...
};
}
