前言

在現代 Web 開發中，設備檢測是一個至關重要的功能。不同的設備（手機、平板、桌面）有著不同的屏幕尺寸、交互方式和性能特點，因此需要針對性地提供不同的用戶體驗。react-device-detect?是一個專門為 React 應用設計的設備檢測庫，它能夠準確識別用戶的設備類型、操作系統、瀏覽器等信息，幫助開發者構建響應式和適配性更強的應用。

它是什么？

react-device-detect?是一個輕量級的 React 庫，用于檢測用戶的設備類型、操作系統、瀏覽器等環境信息。它基于?ua-parser-js?庫，提供了豐富的設備檢測功能，并且專門為 React 組件化開發進行了優化。

主要特性

• 設備類型檢測：準確識別手機、平板、桌面設備
• 操作系統檢測：支持 iOS、Android、Windows、macOS、Linux 等
• 瀏覽器檢測：識別 Chrome、Firefox、Safari、Edge 等主流瀏覽器
• React 友好：提供?Hooks?和組件兩種使用方式
• TypeScript 支持：完整的類型定義
• 輕量級：體積小巧，性能優秀
• 服務端渲染支持：兼容 SSR 環境

安裝方式

# npm
npm install react-device-detect# yarn
yarn add react-device-detect# pnpm
pnpm add react-device-detect

快速上手

基礎用法

import React from "react";
import {BrowserView,MobileView,isBrowser,isMobile,
} from "react-device-detect";function App() {return (<div><h1>設備檢測示例</h1>{/* 使用組件方式 */}<BrowserView><p>這是桌面端顯示的內容</p></BrowserView><MobileView><p>這是移動端顯示的內容</p></MobileView>{/* 使用條件渲染 */}{isMobile ? <button>移動端按鈕</button> : <button>桌面端按鈕</button>}</div>);
}export default App;

使用 Hooks

import React from "react";
import { useDeviceDetect } from "react-device-detect";function DeviceInfo() {const { isMobile, isTablet, isDesktop } = useDeviceDetect();return (<div><h2>設備信息</h2><p>移動設備: {isMobile ? "是" : "否"}</p><p>平板設備: {isTablet ? "是" : "否"}</p><p>桌面設備: {isDesktop ? "是" : "否"}</p></div>);
}export default DeviceInfo;

操作系統檢測

import React from "react";
import {isIOS,isAndroid,isWindows,isMacOS,isLinux,
} from "react-device-detect";function OSInfo() {return (<div><h3>操作系統信息</h3><p>iOS: {isIOS ? "是" : "否"}</p><p>Android: {isAndroid ? "是" : "否"}</p><p>Windows: {isWindows ? "是" : "否"}</p><p>macOS: {isMacOS ? "是" : "否"}</p><p>Linux: {isLinux ? "是" : "否"}</p></div>);
}export default OSInfo;

高級用法

自定義設備檢測

import React, { useState, useEffect } from "react";
import { getUA, isMobile as checkMobile } from "react-device-detect";function CustomDeviceDetect() {const [deviceInfo, setDeviceInfo] = useState({});useEffect(() => {const ua = getUA();const isMobile = checkMobile();setDeviceInfo({userAgent: ua,isMobile,screenWidth: window.innerWidth,screenHeight: window.innerHeight,pixelRatio: window.devicePixelRatio,});}, []);return (<div><h3>自定義設備信息</h3><pre>{JSON.stringify(deviceInfo, null, 2)}</pre></div>);
}export default CustomDeviceDetect;

響應式布局組件

import React from "react";
import {BrowserView,MobileView,TabletView,isMobile,isTablet,
} from "react-device-detect";function ResponsiveLayout({ children }) {return (<div className="responsive-layout">{/* 桌面端布局 */}<BrowserView><div className="desktop-layout"><aside className="sidebar">側邊欄</aside><main className="content">{children}</main></div></BrowserView>{/* 平板端布局 */}<TabletView><div className="tablet-layout"><header className="tablet-header">平板頭部</header><main className="tablet-content">{children}</main></div></TabletView>{/* 移動端布局 */}<MobileView><div className="mobile-layout"><header className="mobile-header">移動頭部</header><main className="mobile-content">{children}</main><nav className="mobile-nav">底部導航</nav></div></MobileView></div>);
}export default ResponsiveLayout;

條件渲染 Hook

import React from "react";
import { useDeviceDetect } from "react-device-detect";function useResponsiveComponents() {const device = useDeviceDetect();const getButtonSize = () => {if (device.isMobile) return "small";if (device.isTablet) return "medium";return "large";};const getGridColumns = () => {if (device.isMobile) return 1;if (device.isTablet) return 2;return 3;};const getFontSize = () => {if (device.isMobile) return "14px";if (device.isTablet) return "16px";return "18px";};return {buttonSize: getButtonSize(),gridColumns: getGridColumns(),fontSize: getFontSize(),...device,};
}function ProductGrid({ products }) {const { gridColumns, isMobile } = useResponsiveComponents();return (<divclassName="product-grid"style={{gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,gap: isMobile ? "8px" : "16px",}}>{products.map((product) => (<div key={product.id} className="product-card">{product.name}</div>))}</div>);
}export default ProductGrid;

為什么選它？

組件化思維

// 傳統方式
{isMobile ? <MobileComponent /> : <DesktopComponent />}// react-device-detect 方式
<MobileView><MobileComponent />
</MobileView>
<BrowserView><DesktopComponent />
</BrowserView>

完整的設備信息

// 獲取全面的設備信息
import {isMobile,isTablet,isDesktop,isIOS,isAndroid,isChrome,isFirefox,isSafari,
} from "react-device-detect";// 一個庫解決所有設備檢測需求

總結

react-device-detect?是現代 React 應用中處理設備檢測的最佳選擇之一，它簡單、可靠、高效，能夠幫助開發者構建更好的跨設備用戶體驗。無論是簡單的響應式布局還是復雜的設備特定功能，它都能提供出色的解決方案。

?React Device Detect 完全指南：構建響應式跨設備應用的最佳實踐 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享