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

Question

在 ReactJS 中，有没有办法确定网站是在移动设备上还是在桌面设备上查看的？因为，根据不同的设备，我想渲染不同的东西。

谢谢

Answer 1

使用 react 钩子(Hook)的简单解决方案

const [width, setWidth] = useState<number>(window.innerWidth);

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

const isMobile = width <= 768;