В современном мире мобильных устройств крайне важно, чтобы их веб-приложения были оптимизированы для различных типов устройств. React, популярная библиотека JavaScript для создания пользовательских интерфейсов, предоставляет различные методы определения того, обращается ли пользователь к вашему приложению с мобильного или настольного устройства. В этой статье мы рассмотрим несколько подходов к обнаружению типа устройства в приложении React, а также приведем примеры кода.

Метод 1: использование объекта window

import React from 'react';
class DeviceDetector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMobile: false,
    };
  }
  componentDidMount() {
    this.setState({
      isMobile: window.innerWidth < 768, // Set the breakpoint as per your design
    });
  }
  render() {
    const { isMobile } = this.state;
    return (
      <div>
        {isMobile ? <p>Mobile Device</p> : <p>Desktop Device</p>}
      </div>
    );
  }
}
export default DeviceDetector;

Метод 2: использование медиазапросов CSS

import React from 'react';
import './DeviceDetector.css';
class DeviceDetector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMobile: false,
    };
  }
  componentDidMount() {
    const mql = window.matchMedia('(max-width: 767px)'); // Set the breakpoint as per your design
    this.setState({
      isMobile: mql.matches,
    });
  }
  render() {
    const { isMobile } = this.state;
    return (
      <div className={isMobile ? 'mobile' : 'desktop'}>
        {isMobile ? <p>Mobile Device</p> : <p>Desktop Device</p>}
      </div>
    );
  }
}
export default DeviceDetector;

Метод 3. Использование внешних библиотек (например, React Device Detect)

import React from 'react';
import { BrowserView, MobileView } from 'react-device-detect';
class DeviceDetector extends React.Component {
  render() {
    return (
      <div>
        <BrowserView>
          <p>Desktop Device</p>
        </BrowserView>
        <MobileView>
          <p>Mobile Device</p>
        </MobileView>
      </div>
    );
  }
}
export default DeviceDetector;

В этой статье мы рассмотрели несколько методов проверки того, находится ли пользователь в приложении React на мобильном или настольном устройстве. Мы рассмотрели методы использования объекта window, медиазапросов CSS и даже внешней библиотеки под названием React Device Detect. Используя эти методы, вы можете обеспечить более индивидуальный пользовательский интерфейс в зависимости от типа устройства пользователя. Не забудьте выбрать тот подход, который лучше всего соответствует требованиям вашего проекта и соображениям дизайна.