ReactJS：如何确定应用程序是在移动浏览器还是桌面浏览器上查看

Question

在ReactJS中，是否有一种方法可以确定网站是在移动端还是桌面端被浏览？因为，根据我想要呈现的设备不同。

谢谢

Answer 1

您可以使用React Device Detect软件包

要安装，您可以使用npm或YARN：

# For NPM:
npm install react-device-detect --save

# For Yarn
yarn add react-device-detect

示例：

js prettyprint-override">import {BrowserView, MobileView} from 'react-device-detect';

const MyComponent = () => {
    return (
        <>
            <BrowserView>
                <h1>This is rendered only in browser</h1>
            </BrowserView>
            <MobileView>
                <h1>This is rendered only on mobile</h1>
            </MobileView>
        </>
    );
};

如果不需要视图，可以使用ismobile进行条件呈现

import {isMobile} from 'react-device-detect';

const MyComponent = () => {
    if(isMobile) {
        return (
            <div> This content is unavailable on mobile</div>
        )
    }
    return (
        <div> content... </div>
    );
};

摘自React Device Detect自述文件，稍作修改

Answer 2

使用反应钩的简单解决方案

const [width, setWidth] = useState<number>(window.innerWidth);
function handleWindowSizeChange() {
        setWidth(window.innerWidth);
    }
useEffect(() => {
        window.addEventListener('resize', handleWindowSizeChange);
        return () => {
            window.removeEventListener('resize', handleWindowSizeChange);
        }
    }, []);

let isMobile: boolean = (width <= 768);