如何知道代理是否是移動設備 - 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;

代碼沙盒。

---

PS：此方法僅檢查視口寬度是否小於某個常量，但這並不總是意味着用戶代理是移動瀏覽器。 如果您希望實現后者，您可以考慮使用諸如react-device-detect類的庫。 此外，看到您提供的示例，我認為您可以使用 CSS 媒體查詢更輕松地做到這一點。