JavaScript를 사용하여 모바일 장치, OS를 감지하는 방법

To get the bowser details or device details, JavaScript stores these information in the navigator property of window object.
navigator object contains lots of information about the browser, some of the most used/ important information we will see later in this tutorial.

1. Clipboard - used to copy something to clipboard and paste it any where (Ex. while making Click to copy)
2. connection
3. language - shows the language of browser.
4. geolocation - Returns a Geolocation object that can be used to locate the user's position
5. onLine - check whether the browser is online
6. platform - machine type where browser is installed.
7. cookieEnabled - it returns a Boolean value that indicates whether cookies are enabled or not.
8. serviceWorker - mainly used to checks if the browser supports service workers
9. vibrate(time) - make device vibrate if it support that
10. userAgent - will see below
11. userAgentData - will see below

I think this much information about the navigator object is enough to understand what is navigator object and what all information it contains

Now, let see

To get these information we will use the property userAgent , userAgentData of navigator object.

navigator.userAgent
userAgent will give you the information of lot of things like device name, browser name, OS version but the information returned by browser is not much understandable.
So, we can understand these returned information from the hack.

to get OS version and name you can follow the below hack,

if (window.navigator.userAgent.indexOf("Windows NT 10.0")!= -1) 
{console.log("OS is Windows 10");}

if (window.navigator.userAgent.indexOf("Windows NT 6.3") != -1) 
{console.log("OS is Windows 8.1");}

if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) 
{console.log("OS is Windows 8");}

if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) 
{console.log("OS is Windows 7");}

if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) 
{console.log("OS is Windows Vista");}

if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) 
{console.log("OS is Windows XP");}

if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) 
{console.log("OS is Windows 2000");}

if (window.navigator.userAgent.indexOf("Mac") != -1) 
{console.log("OS is Mac/iOS");}

if (window.navigator.userAgent.indexOf("X11") != -1) 
{console.log("OS is UNIX");}

if (window.navigator.userAgent.indexOf("Linux")!= -1) 
{console.log("OS is Linux");}

to check mobile device info you can follow below hack,

 function detectMobile() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

userAgent is much more complex to get these details.
So we have one more property i.e.
navigator.userAgentData
This gives the information about browser and mobile detection in 1 line.

navigator.userAgentData.mobile; //returns true or false, depending on the condition

NOTE: Both of these 2 ways are not recommended to be use in the production.

So lets now see the best way to do so,