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

Question

在ReactJS中,有没有办法确定网站是在移动设备还是桌面上查看？因为,取决于我想要呈现不同的东西的设备.

谢谢

Answer 1

您可以使用React 设备检测包

安装

要安装，您可以使用 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 2

使用反应钩子的简单解决方案

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

let isMobile: boolean = (width <= 768);

Answer 3

平板电脑有大屏幕，但它们的功能类似于手机，因此如果您想检测触摸屏而不是屏幕尺寸：

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

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

创建自定义挂钩并监听调整大小、加载、方向更改和重新加载将重新渲染您使用此挂钩的组件。

import { useEffect, useState } from 'react';

const useIsMobile = (breakpoint = 640) => {
  const checkForDevice = () => window.innerWidth < breakpoint;

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

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

    if (typeof window !== 'undefined') {
      window.addEventListener('resize', handlePageResized);
      window.addEventListener('orientationchange', handlePageResized);
      window.addEventListener('load', handlePageResized);
      window.addEventListener('reload', handlePageResized);
    }

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

  return {
    isMobile,
  };
};

export default useIsMobile;

Answer 6

我进一步加强了 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 7

当您可以使用一行普通的 javascript 代码时，为什么要使事情复杂化？

使用window.screenobject 获取当前屏幕的宽度。例如window.screen.width将返回客户端当前宽度的值（以像素为单位）。

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

我希望它有帮助。谢谢 ：-）

Answer 8

React 不会这样做，React 只是 MVC 中的 View。确定逻辑（控制应该查看的内容）是控制器的角色。React 没有实现控制器，但认为应该由应用程序的其余部分来完成，因此您应该添加一些其他代码来控制 React 组件的上下文，甚至为不同的设备使用不同的组件。