Cómo detectar el sistema operativo (OS) mediante JavaScript

A veces es necesario detectar el sistema operativo del usuario al desarrollar aplicaciones web o sitios web. Esto puede ser útil para aplicar diferentes estilos CSS, recopilar datos analíticos o adaptar ciertas funciones según el entorno del usuario. Si bien existen muchas bibliotecas y complementos disponibles para la detección del sistema operativo, en casos sencillos es posible implementar esta funcionalidad sin herramientas de terceros.

En la mayoría de los casos, no es necesario detectar la versión exacta del sistema operativo; basta con conocer su tipo general. Los sistemas operativos más comunes que se pueden gestionar son Windows, macOS, Linux, Android e iOS. Estas plataformas cubren a la mayoría de los usuarios y suelen ser suficientes para tareas prácticas de frontend.

Existen varios casos de uso reales para la detección del sistema operativo. Por ejemplo, se pueden mostrar diferentes enlaces de descarga según si el usuario utiliza Windows o macOS. Otro escenario común es ajustar el comportamiento de la interfaz de usuario o mostrar instrucciones específicas de la plataforma. En algunos casos, la detección del sistema operativo también puede utilizarse para mejorar la experiencia del usuario adaptando el contenido o la funcionalidad a su dispositivo.

JavaScript

function detectOS() {
    const platform = navigator.platform.toLowerCase(),
        iosPlatforms = ['iphone', 'ipad', 'ipod', 'ipod touch'];

    if (platform.includes('mac')) return 'MacOS';
    if (iosPlatforms.includes(platform)) return 'iOS';
    if (platform.includes('win')) return 'Windows';
    if (/android/.test(navigator.userAgent.toLowerCase())) return 'Android';
    if (/linux/.test(platform)) return 'Linux';

    return 'unknown';
}

El enfoque aquí descrito no pretende abarcar todos los sistemas operativos posibles, sino que se centra en los más utilizados. Asimismo, la lógica puede ampliarse o modificarse fácilmente si en el futuro se necesita compatibilidad con otras plataformas.

Puedes ver un ejemplo del código funcionando en Codepen: https://codepen.io/igorrybalko/pen/vEBvPgm