安装

要安装，可以使用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 unavailable on mobile</div>
        )
    }
    return (
        <div> content... </div>
    );
};

来自React Device Detect README的修改，

Answer 2

您要找的是react-responsive。你可以找到它here

以下是来自回购的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 3

使用react钩子的简单解决方案

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 4

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

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

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

内部使用

我希望对您有所帮助。谢谢：-）

Answer 5

我进一步增强了Volobot的答案。我创建了一个如下所示的钩子，它的工作原理类似于charm：）

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 6

我将这种方法用于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 7

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

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)

ReactJS：如何确定是在移动设备还是桌面浏览器上查看应用程序

9 个答案:

安装

用法