Detección del OS del usuario en el navegador con JavaScript

Aprende a detectar de forma sencilla el sistema operativo del usuario en el navegador usando JavaScript. Esta técnica es útil para personalizar la experiencia, optimizar descargas, activar funciones específicas por plataforma, mejorar analítica y reforzar ciberseguridad al adaptar políticas según el entorno del cliente.

Existen tres fuentes principales de información en el navegador: navigator.userAgentData cuando está disponible, navigator.userAgent y navigator.platform. La recomendación actual es priorizar userAgentData por precisión y privacidad, y usar userAgent y platform como respaldo. Recuerda que cualquier identificación del entorno del cliente puede ser manipulada, por lo que conviene usar detección de capacidades además de la detección de sistema operativo.

Guía paso a paso para una detección robusta:

- Primero, intenta leer navigator.userAgentData.platform y navigator.userAgentData.brands si existen. Muchas implementaciones modernas exponen valores como Windows, macOS, Android, iOS y Chrome OS a través de Client Hints.

- Si no existe userAgentData, recurre a navigator.userAgent y navigator.platform. Normaliza a minúsculas y elimina espacios duplicados para simplificar las comparaciones.

- Mapea tokens comunes a sistemas operativos conocidos:

Windows cuando aparezcan tokens como windows nt 10.0, 6.3, 6.2, 6.1 o simplemente windows

macOS cuando detectes mac os x, macintosh o mac os; evita confundirlo con iOS en iPads modernos

iOS o iPadOS cuando veas iphone, ipad o ipod; en iPads con iOS 13 o superior el navegador puede anunciar plataforma mac, por lo que conviene comprobar navigator.maxTouchPoints mayor que 1 para reclasificar como iPadOS

Android cuando el user agent contenga android

Linux cuando aparezca linux y no exista android

Chrome OS cuando veas cros

- Determina tipo de dispositivo. Usa pistas como mobile o tablet dentro del user agent, la presencia de android, la familia de dispositivos iPhone o iPad y señales como screen.width, screen.height y maxTouchPoints para clasificar entre escritorio, móvil o tablet.

- Extrae versión. En Windows suele venir como windows nt 10.0 o 6.1; en macOS como mac os x 10_15_7; en iOS iPhone os 16_5; en Android android 14. Convierte guiones bajos en puntos y limita la extracción a los primeros dos o tres segmentos de versión.

- Devuelve un resultado normalizado con nombre del sistema operativo, versión estimada, tipo de dispositivo e indicadores como esMovil o esEscritorio, y guarda un valor desconocido para casos que no encajen con las reglas.

Consejos avanzados y casos límite:

- iPad como macOS. Safari en iPad puede anunciarse como mac. Si la plataforma sugiere mac pero hay soporte táctil significativo, reclasifica a iPadOS.

- Navegadores que permiten camuflaje. Algunos usuarios cambian manualmente el user agent. Trata esta detección como una pista y no como una verdad absoluta para decisiones críticas de seguridad.

- Client Hints graduales. En sitios nuevos, solicita hints adicionales con el encabezado o meta http equivalente para obtener arquitectura y versión mayor del sistema, siempre respetando privacidad y normativa vigente.

- Fallback por capacidades. Para habilitar funciones sensibles, combina la detección del sistema con pruebas de características como soporte de APIs, códecs o permisos.

Ejemplo de lógica sin código literal: si userAgentData.platform indica Windows, marca sistema Windows y trata de obtener versión mayor con hints; si no hay hints y userAgent contiene windows nt 10.0, asigna versión 10; si detectas mac os x 13, registra macOS 13; si aparece android 14, asigna Android 14; si ves iphone o ipad, asigna iOS o iPadOS y usa maxTouchPoints para diferenciar iPad; en ausencia de coincidencias, informa como Desconocido y continúa por detección de capacidades.

Beneficios prácticos para producto y negocio:

- Descargas inteligentes. Muestra instaladores y guías específicas para Windows, macOS o Linux según el caso.

- Experiencia óptima. Activa atajos, fuentes y gestos según la plataforma para mejorar la usabilidad.

- Analítica técnica. Segmenta métricas por sistema operativo para priorizar pruebas, QA y roadmap.

- Seguridad y cumplimiento. Ajusta políticas, cabeceras y recomendaciones de ciberseguridad por entorno del cliente.

Sobre Q2BSTUDIO: somos una empresa de desarrollo de software que crea aplicaciones a medida y software a medida con enfoque en calidad, rendimiento y seguridad. Integramos inteligencia artificial e ia para empresas, diseñamos agentes IA que automatizan procesos de extremo a extremo, y reforzamos ciberseguridad con auditorías y buenas prácticas. Además, impulsamos servicios cloud aws y azure, servicios inteligencia de negocio con power bi y soluciones multiplataforma listas para escalar.

Si necesitas un equipo que implemente una detección de sistema operativo sólida y la conecte con tu analítica, personalización y despliegues, descubre nuestro desarrollo de aplicaciones a medida y software multiplataforma con arquitecturas modernas y orientadas al rendimiento.

Palabras clave recomendadas para tu estrategia: aplicaciones a medida, software a medida, inteligencia artificial, ia para empresas, agentes IA, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi. Con Q2BSTUDIO, tu producto detecta el sistema operativo del usuario con precisión y transforma ese dato en decisiones que generan valor real.