La técnica que tú tienes es el método actual, hay versiones más compleja que otras, pero el sentido es el mismo: Encontrar el nombre del navegador en la cadena arrojada por navigator.userAgent
Otra opción es usando la pantalla del dispositivo o los media query, en rigor el tamaño del viewport, por ejemplo
if(window.matchMedia("(max-width: 767px)").matches){
console.log("mobile");
} else{
console.log("desktop");
}
Pero si se tiene este código en un iframe pequeño o simplemente disminuyo el tamaño del navegador, el sistema falla, porque como dije antes solo estamos evaluando el tamaño del viewport.
Esto también aplica para los media query del CSS, no se detecta el navegador si el dispositivo es móvil o no, se detecta el tamaño del viewport. Es que hoy en día tampoco tiene sentido lo contrario, hoy los dispositivos móviles son computadoras potentes y la única diferencia radica en la pantalla
Existe una iniciativa, me parece que impulsada por Google, de cambiar el userAgent
según ellos afecta la privacidad de los usuarios (que ironía), y se está creando una nueva API llamada userAgentData, donde habrá la propiedad mobile
que indicará con un true
si es dispositivo móvil y false
en caso contrario
console.log(navigator.userAgentData.mobile);