Блог

Мне нужна глобальная переменная, которая говорит мне, какое устройство я в настоящее время использую, моя команда хочет, чтобы у меня был мобильный, планшет, рабочий стол и мобильный ландшафт. Я понятия не имел, как это сделать, но я начал копаться в Google и обнаружил эту функцию:

 const DeviceDetector = () => {
    
      let hasTouchScreen = false;
      if ("maxTouchPoints" in navigator) {
        hasTouchScreen = navigator.maxTouchPoints > 0;
      } else if ("msMaxTouchPoints" in navigator) {
        hasTouchScreen = navigator.maxTouchPoints > 0;
      } else {
        const mQ = matchMedia("(pointer:coarse)");
        if (mQ amp;amp; mQ.media === "(pointer:coarse)") {
          hasTouchScreen = !!mQ.matches;
        } else if ("orientation" in window) {
          hasTouchScreen = true; // deprecated, but good fallback
        } else {
          // Only as a last resort, fall back to user agent sniffing
          const UA = navigator.userAgent;
          hasTouchScreen =
            /b(BlackBerry|webOS|iPhone|IEMobile)b/i.test(UA) ||
            /b(Android|Windows Phone|iPad|iPod)b/i.test(UA);
        }
      }
      if (hasTouchScreen) {
        setDeviceType("Mobile");
      } else {
        setDeviceType("Desktop");
      }
    }
 

но здесь две проблемы, во-первых: эта функция обнаруживает только мобильные и настольные устройства, но более серьезная проблема в том, что мне нужна эта функция, которая срабатывает всякий раз, когда изменяется ширина или высота страницы, что я и попытался сделать, добавив ее в этот эффект использования:

 useEffect(() =>{
      DeviceDetector();

      console.log('changing device type', deviceType);
      
    },[window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight])
 

На мгновение показалось, что он работает нормально, но при запуске он всегда отображается либо на мобильном устройстве, либо на рабочем столе, в зависимости от того, с чем вы загрузили страницу.
Я был бы рад, если бы кто-то из вас столкнулся с той же проблемой и мог бы направить меня в правильном направлении, есть ли инструмент для облегчения работы, я читал о react-device-detect, но, похоже, ему также требуется обновление страницы для обнаружения изменений устройства.
Я перепробовал кучу вещей, касающихся ландшафтного мобильного телефона, но безуспешно.

Тебе бы не помешал крюк. Ранее я использовал это для доступа к размерам экрана:

 import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

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

  return windowDimensions;
}
 

Вы можете сопоставить размеры с устройствами, чтобы получить то, что вы ищете.