Necesito tener una variable global que me diga qué dispositivo estoy usando actualmente, mi equipo quiere que tenga móvil, tableta, escritorio y paisaje móvil. No tenía idea de cómo hacer eso, pero comencé a buscar en Google y descubrí esta función:
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 && 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"); } }pero los problemas aquí son dos, primero: esta función solo detecta dispositivos móviles y de escritorio, pero el mayor problema es: necesito que esta función se active cada vez que cambie el ancho o el alto de la página, lo que intenté hacer al agregarlo en este useEffect:
useEffect(() =>{ DeviceDetector(); console.log('changing device type', deviceType); },[window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight])Por un momento parecía que funcionaba bien, pero cuando se dispara, se muestra siempre móvil o de escritorio, dependiendo de con qué hayas cargado la página. Me alegraría si algunos de ustedes encontraran el mismo problema y me pudieran orientar en la dirección correcta, ¿existe alguna herramienta para facilitar las cosas? Leí sobre react-device-detect pero parece que también necesita una actualización de página para detectar cambios de dispositivo. Probé un montón de cosas con respecto al móvil horizontal, pero no tuve suerte.
Podrías usar un gancho. Anteriormente he estado usando esto para acceder a las dimensiones de la pantalla:
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; }Puede asignar las dimensiones a los dispositivos para obtener lo que está buscando.