每天一个奇奇怪怪的问题（react如何判断运行在PC端还是移动端）

最新推荐文章于 2025-03-20 20:50:19 发布

吉吉鸭

最新推荐文章于 2025-03-20 20:50:19 发布

阅读量1.1k

点赞数 8

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/J20010905/article/details/135933468

版权

本文介绍了如何在React应用中使用useState和useEffecthooks来检查用户代理字符串，判断是否为移动端设备，并动态设置isMobile状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React

// 初始值设置为不是移动端
const [isMobile, setIsMobile] = useState<boolean>(false);

const ua = navigator.userAgent.toLowerCase();
const agents = ['iphone', 'ipad', 'ipod', 'android', 'linux', 'windows phone']; // 所有可能是移动端设备的字段

useEffect(() => {
    for (let i = 0; i < agents.length; i++) {
      if (ua.indexOf(agents[i]) !== -1) {
        setIsMobile(true);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);