¿Cómo puedo saber si un usuario es móvil o de escritorio?

Si quieres que algo salga bien, hazlo tú mismo.

Hace más de dos años programé una aplicación para mi mujer para descargar vídeos y audios desde YOUTUBE.

Ella lo que quería era poder ponerse de tono de llamada canciones que encontraba en YOUTUBE y descargarse podcasts para no consumir datos cuando iba a caminar.

Antes de ponerme a ello miré si ya había alguna... y no encontré una, encontré varias pero con mucha publicidad.

Pero lo que realmente me hizo ponerme a programar la mía fue que encontré varias aplicaciones que te enviaban a páginas donde intentaban hacer phising... lo típico de te ha tocado un vale de Amazon o un carro de Mercadona.

A lo que voy... programé mi aplicación y en un momento determinado se posicionó la primera cuando hacías una búsqueda en Google relacionada con la descarga de vídeos de YOUTUBE.

😨 Me disparó mucho el tráfico en mi servidor, de hecho, como la aplicación la tengo sin monetizar me cuesta tenerla viva unos eurillos al mes.

La aplicación la puedes encontrar aquí 👇

A los pocos días de que se me disparara el tráfico, me contactó una empresa estadounidense para preguntarme si estaría dispuesto a poner un banner de un software que ellos vendían en mi aplicación.

Rápidamente les contesté que sí 🤑, y ahí comenzó una batería de correos en los que me proponían el lugar donde poner el banner, solicitud de informes de tráfico...

De entre todo lo que me pidieron, querían saber si yo era capaz de saber si el usuario que consumía mi aplicación era usuario de móvil o de escritorio porque su software era sólo de escritorio entonces querían que sólo mostrase el banner a esos usuarios.

Y así me surgió la necesidad de saber qué tipo de usuario consumía mi aplicación.

Si has visitado mi aplicación, verás que no hay ningún banner y es porque la empresa estadounidense y yo no llegamos a un acuerdo ❌.

Su departamento de compras me mandó un contrato que me parecía abusivo, me pagaban 400$ al mes (que me parecía fantástico) pero sólo si en el mes les proporcionaba 80.000 usuarios 🚩

En aquel momento, extrapolando las visitas que llevaba conseguiría en torno a las 75.000 visitas al mes y me parecía injusto que si me quedaba ahí no me pagaran nada.

Les propuse hacerlo por escalones, ya me entiendes, si consigo de 40K a 50K 100$, de 50K a 60K 200$... y no poner un techo en 400$, si les conseguía 200K no me parecía justo que me pagaran lo mismo que por 80K.

En fin... que no hubo acuerdo 😶

Ahora sí te dejo cómo conseguí saber si el usuario que entraba en mi aplicación era móvil o de escritorio.

¿Qué es el objeto screen.orientation?

Uso el objeto screen.orientation que lo que hace es proporcionar información sobre la orientación de la pantalla del dispositivo en el que se está ejecutando.

Es cierto que no tendré certeza al 100% de si el usuario es de escritorio, pero se aproxima bastante.

El screen.orientation tiene propiedades y eventos que nos permiten detectar y responder a cambios en la orientación de la pantalla.

Las propiedades del screen.orientation son:

• screen.orientation.type; esta propiedad devuelve una cadena que describe la orientación actual de la pantalla y será:

  • landscape-primary
  • landscape-secondary
  • portrait-primary
  • portrait-secondary

• screen.orientation.angle; nos indica el ángulo actual de la orientación de la pantalla en grados.

  Será 0, 90, 180 o 270, lo que corresponde a la orientación horizontal, vertical o en ángulo recto.

• screen.orientation.lock(); este método permite bloquear la orientación de la pantalla en una orientación específica.

  Por ejemplo, screen.orientation.lock("portrait-primary") bloquearía la pantalla en orientación vertical.

• screen.orientation.unlock(); esta función se utiliza para desbloquear la orientación de la pantalla si previamente la habíamos bloqueado.

Los eventos asociados al objeto screen.orientation incluyen change, que se dispara cuando cambia la orientación de la pantalla y orientationchange, que es un evento del objeto window que también se dispara cuando cambia la orientación de la pantalla.

Valores de la propiedad screen.orientation.type

• landscape-primary; indica que la pantalla se encuentra en orientación horizontal (paisaje) con la parte superior de la pantalla hacia la derecha.

  En la mayoría de los dispositivos, esta es la orientación estándar cuando se sostiene el dispositivo en posición horizontal.

• landscape-secondary; representa la orientación horizontal, pero con la parte superior de la pantalla hacia la izquierda.

  Esta orientación se utiliza en algunos dispositivos cuando se gira en sentido contrario a las agujas del reloj.

• portrait-primary; Indica que la pantalla está en orientación vertical (retrato) con la parte superior de la pantalla hacia arriba.

  Esta es la orientación estándar cuando se sostiene el dispositivo en posición vertical.

• portrait-secondary; representa la orientación vertical, pero con la parte superior de la pantalla hacia abajo.

  Esta orientación se utiliza en algunos dispositivos cuando se gira en sentido contrario a las agujas del reloj.

La opción landscape-primary y portrait-primary son las orientaciones estándar en la mayoría de los dispositivos, pero landscape-secondary y portrait-secondary son útiles cuando se gira el dispositivo en sentido contrario a las agujas del reloj o se invierte la orientación.

Código para saber si un usuario es móvil o de escritorio

function isMobileDevice() {
  return (screen.orientation.type === "portrait-primary") || (navigator.userAgent.indexOf('IEMobile') !== -1);
  }
      

La función comprueba si el objeto screen.orientation.type es portrait-primary o si el agente de usuario contiene la cadena "IEMobile" (lo que indica que el dispositivo es un dispositivo móvil que ejecuta Internet Explorer Mobile).

Hasta luego 🖖