Estoy tratando de detectar cuando el usuario usa un dispositivo móvil en mi aplicación.
Por lo general, lo detectaremos mediante el uso de un agente de usuario o una pantalla táctil, pero el modo móvil de Chrome en las herramientas de desarrollo cambia ambos.
¿Tiene alguna idea de cómo puedo detectar dispositivos móviles o de escritorio y no ser engañado por las herramientas de desarrollo de Chrome?
En lugar de buscar el tipo de dispositivo, puede verificar el sistema operativo. Aquí hay una lista de posibles valores que puede usar.
windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']; android = "Android"; typeOfOS = window.navigator.platform; if (windowsPlatforms.includes(typeOfOS)) { //do for windows } else if(typeOfOS === android){ //do for android }Puedes hacerlo en css. Puede usar @media para ver si el tamaño de la pantalla es más pequeño que el que normalmente tienen los escritorios y, de esta manera, podrá hacer que su aplicación responda. Echa un vistazo a este código:
body { --background-image: url('https://thumbs.dreamstime.com/b/vertical-banner-template-hands-typing-computer-office-supplies-distance-education-e-learning-obtaining-university-156390588.jpg'); margin: 0; padding: 0; box-sizing: border-box; background-image: var(--background-image); background-size: 100vw 100vh; z-index: -1000; } #submit-form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 180px; width: 300px; background-color: white; border-radius: 10px; border: 2px dashed; display: flex; flex-direction: column; align-items: center; justify-content: space-around; z-index: 1000; } #email-input { height: 30px; width: 220px; border-radius: 10px; } #submit-button { height: 30px; width: 80px; border-radius: 10px; background-color: lightgreen; border: 1px dashed; } @media all and (min-width: 1000px) { body { background-image: url('https://img.freepik.com/free-vector/online-education-students-view-lessons-through-mobile-devices-during-distance-learning_178888-361.jpg?w=2000'); } #submit-form { height: 250px; width: 500px; } #email-input { height: 50px; width: 300px; border-radius: 10px; } }Aquí estoy diseñando los sitios para dispositivos móviles primero, y luego verifico si el usuario está en una computadora de escritorio y, si lo está, estoy haciendo que el sitio web responda nuevamente.
Esto fue para la parte de estilo, pero, ¿qué pasa si quieres detectarlo en JavaScript?
Puedes usar una función simple para esto:
function findUserDevice() { const isOnMobile = false; if(window.innerWidth < window.innerHeight) { isOnMobile = true; } return isOnMobile; }Esto es lo que suelo usar, ¡espero que esto haya sido útil!