ReactJS：如何確定應用程序是在移動瀏覽器還是桌面瀏覽器上查看

Question

ReactJS，有沒有辦法判斷網站是在手機上瀏覽還是在桌面上瀏覽？ 因為，根據不同的設備，我想渲染不同的東西。

謝謝

Answer 1

使用反應鈎子的簡單解決方案

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;

Answer 2

您可以使用React 設備檢測包

這個包使用瀏覽器的user-agent而不是屏幕大小。

如果想要在桌面與移動設備或基於設備的某些鏈接上顯示不同的內容，這可能會很有幫助

安裝

要安裝，您可以使用 npm 或 yarn：

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

# For Yarn
yarn add react-device-detect

用法

例子：

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 available only on mobile</div>
        )
    }
    return (
        <div> content... </div>
    );
};

取自React Device Detect README ，稍作修改

Answer 3

我進一步增強了 Volobot 的答案。 我創建了一個如下的鈎子，它的作用就像魅力:)

import React, {useEffect, useState} from "react";

const useCheckMobileScreen = () => {
    const [width, setWidth] = useState(window.innerWidth);
    const handleWindowSizeChange = () => {
            setWidth(window.innerWidth);
    }

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

    return (width <= 768);
}

export default useCheckMobileScreen

Answer 4

您正在尋找的東西稱為react-responsive 。 你可以在這里找到

以下是how to use他們的倉庫中的快速指南：

var MediaQuery = require('react-responsive');

var A = React.createClass({
  render: function(){
    return (
      <div>
        <div>Device Test!</div>

        <MediaQuery minDeviceWidth={1224}>
          <div>You are a desktop or laptop</div>
        </MediaQuery>
        <MediaQuery maxDeviceWidth={1224}>
          <div>You are a tablet or mobile phone</div>
        </MediaQuery>

        <MediaQuery orientation='portrait'>
          <div>You are portrait</div>
        </MediaQuery>
        <MediaQuery orientation='landscape'>
          <div>You are landscape</div>
        </MediaQuery>

        <MediaQuery minResolution='2dppx'>
          <div>You are retina</div>
        </MediaQuery>
      </div>
    );
  }
});

Answer 5

當你可以使用一行 vanilla javascript 代碼時，為什么要把事情復雜化？

使用window.screen對象獲取當前屏幕的寬度。 例如window.screen.width將返回客戶端當前寬度的值（以像素為單位）。

在if (window.screen.width >= 1280) { /* conditional statements */ }使用它

我希望它有所幫助。 謝謝 ：-）

Answer 6

創建一個自定義 Hook 並監聽 Resize、load、orientationchange 和 reload 將重新渲染您使用此鈎子的組件。

  import { useState, useEffect } from 'react';

  const useDeviceDetect = () => {
    const checkForDevice = () => {
      let windowWidth = window.innerWidth;
      if (windowWidth < 767.98) {
        return true;
      } else {
        return false;
      }
    };

    const [isMobile, setIsMobile] = useState(checkForDevice());

    useEffect(() => {
      const handlePageResized = () => {
        setIsMobile(checkForDevice);
      };

      window.addEventListener('resize', handlePageResized);
      window.addEventListener('orientationchange', handlePageResized);
      window.addEventListener('load', handlePageResized);
      window.addEventListener('reload', handlePageResized);

      return () => {
        window.removeEventListener('resize', handlePageResized);
        window.removeEventListener('orientationchange', handlePageResized);
        window.removeEventListener('load', handlePageResized);
        window.removeEventListener('reload', handlePageResized);
      };
    }, []);

    return {
      isMobile,
    };
  };

  export default useDeviceDetect;

Answer 7

我將這種方法用於 React，它在 2020 年效果很好。感謝@Anubahav Gupta

npm install react-responsive --save

然后創建組件：

import React, { Fragment, Component } from 'react';
import MediaQuery from 'react-responsive';

class MyMediaQuery extends Component {
    render() {
        return (
            <Fragment>
                <div>Device Test!</div>

                <MediaQuery minDeviceWidth={1224}>
                    <div>You are a desktop or laptop</div>
                </MediaQuery>
                <MediaQuery maxDeviceWidth={1224}>
                    <div>You are a tablet or mobile phone</div>
                </MediaQuery>

                <MediaQuery orientation='portrait'>
                    <div>You are portrait</div>
                </MediaQuery>
                <MediaQuery orientation='landscape'>
                    <div>You are landscape</div>
                </MediaQuery>

                <MediaQuery minResolution='2dppx'>
                    <div>You are retina</div>
                </MediaQuery>
            </Fragment>
        );
    }
}

export default MyMediaQuery;

它可以在任何加載的頁面上按原樣工作，但也可以通過以下方式導入另一個文件：

import MyMediaQuery from '.newFileName';

然后在任何地方使用：

<MyMediaQuery />

Answer 8

這不是 React 特有的，但這是我的 js 函數：

export const isMobile = () => window.matchMedia && window.matchMedia("(max-width: 480px)").matches

Answer 9

const getNumberDesignRequest = screenWidth => {
  let numberDesignRequest = 20
  if (screenWidth >= 1280 && screenWidth < 1525) {
    numberDesignRequest = 21
  }
  
  return numberDesignRequest
}

const ScreenWidth = () => {
  const [screenWidth, setScreenWidth] = useState(window.innerWidth)

  useLayoutEffect(() => {
    const handleResize = () => {
      const { innerWidth } = window
      setScreenWidth(innerWidth)
    }

    window.addEventListener('resize', debounce(handleResize, 1000))
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return screenWidth
}

const FuzzySearch = () => {
  const screenWidth = ScreenWidth()
const numberDesignRequest = getNumberDesignRequest(screenWidth)

Answer 10

平板電腦有大屏幕，但它們就像手機一樣，所以如果你想檢測觸摸屏而不是屏幕大小：

const isTouchScreenDevice = () => {
    try{
        document.createEvent('TouchEvent');
        return true;
    }catch(e){
        return false;
    }
}

Answer 11

解決辦法是檢查屏幕的大小

const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const MAX_WIDTH_FOR_MOBILE = 900;

現在用最大寬度檢查屏幕的寬度

return (
   width < MAX_WIDTH_FOR_MOBILE ? <Mobile /> : <Desktop />
)

Answer 12

React 不這樣做，React 只是 MVC 中的視圖。 確定邏輯（控制應該查看的內容）是 Controller 的角色。 React 沒有實現控制器，但認為應該由應用程序的其余部分來完成，因此您應該添加一些其他代碼來控制 React 組件的上下文，甚至為不同的設備使用不同的組件。