JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

JavaScript

console.log(navigator.userAgent);

const ua = navigator.userAgent.toLowerCase().replace(/^mozilla\/\d\.\d\W/, "");

const mobiles = {
        "iphone": /iphone/, 
        "ipad": /ipad|macintosh/, 
        "android": /android/
        
    };
    desktops = {

        "windows": /win/, 
        "mac": /macintosh/, 
        "linux": /linux/

    };
let _os
for(const [key, value] of Object.keys(mobiles)) {
	if(value.test(ua) && navigator.maxTouchPoints >= 1) {
    _os = mobiles[key]
    break
  }
}
console.log('_os', _os)
let os = Object.keys(mobiles)
.find(os => mobiles[os].test(ua) && navigator.maxTouchPoints >= 1) 
|| 
Object.keys(desktops)
.find(os => desktops[os].test(ua));

let browserTest = ua.match(/(\w+)\/(\d+\.\d+(?:\.\d+)?(?:\.\d+)?)/g), 
    browserOffset = browserTest.length && (browserTest.length > 2 && !(/^(ver|cri|gec)/.test(browserTest[1])) ? 1 : 0), 
    browserResult = browserTest.length && browserTest[browserTest.length - 1 - browserOffset].split("/"), 
    browser = browserResult && browserResult[0], 
    version = browserResult && browserResult[1];

console.log(os, browser, version);