如何知道代理是否是移动设备-nextjs

Question

我使用的是nextjs(10.1.3(。

我使用这个功能：

import React, {useEffect, useState} from "react";
const useCheckMobileScreen = () => {
if (typeof window !== "undefined"){
const [width, setWidth] = useState(window.innerWidth);
const handleWindowSizeChange = () => {
setWidth(window.innerWidth);
}

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

return (width <= 768);
}
return false;

}
export default useCheckMobileScreen

现在我为我的布局调用这个函数：

import useCheckMobileScreen from "utiles/useCheckMobileScreen";
export const ProductItem = ({product}) => {
const isMobile = useCheckMobileScreen()
let itemClass = 'product-item';
if (isMobile) {
itemClass = itemClass + ' full-width'
}
return (
<div className={itemClass}>
...

但当我的页面第一次加载时，我的类"全宽"添加到了我的元素中。但当我刷新页面时，"全宽"类名就会消失！

Answer 1

只需触发处理程序，即可使用初始窗口宽度更新状态。

另外，不要在条件语句中使用useEffect和useState。在钩子中使用一个条件语句(但在这种情况下甚至可以不使用条件语句(。钩参考规则

你应该考虑减少768px的宽度(IMO是药片的尺寸(。

import { useState, useEffect } from "react";
const useCheckMobileScreen = () => {
const [width, setWidth] = useState(0);
useEffect(() => {
const handleWindowSizeChange = () => setWidth(window.innerWidth);
handleWindowSizeChange();
window.addEventListener("resize", handleWindowSizeChange);
return () => window.removeEventListener("resize", handleWindowSizeChange);
}, []);
return width <= 576;
};
export default useCheckMobileScreen;

CodeSandbox。

---

PS：此方法仅检查视口宽度是否小于某个常数，但这并不总是意味着用户代理是移动浏览器。如果你想实现后者，你可以考虑使用一些库，比如react-device-detect。此外，看到您提供的示例，我认为使用CSS媒体查询可以更容易地做到这一点。