Getting (mobile) device name from javascript

Question

Is there a way to get the name of a mobile device (e.g. "John's iPhone" ) using javascript?

---

Maybe I wasn't very clear... what I meant is not whether it's an iPhone, iPad etc. but the "device name" - for example it can be "John's iPhone".

Answer 1

You can't do this through javascript for a web app running in a native browser - javascript generally doesn't have access to this personal identifying data.

One possible way is to use a framework like PhoneGap which may have an API to access the device name. But then, you can only deploy your web site via an app store, so this could be very limiting based on your use case.

Answer 2

Your best bet is to use the user agent:

e.g.

const ua = navigator.userAgent
const device = {
  iPad: /iPad/.test(ua),
  iPhone: /iPhone/.test(ua),
  Android4: /Android 4/.test(ua)
}

The object will allow you to write nice conditional logic such as if(device.iPad) { /* do stuff */ }

Answer 3

I'm working with mobile device with embedded scanner. To be able to use some the JavaScript library of different devices and to avoid conflict with those libraries of different manufacturer (Zebra, Honeywell, Datalogic, iOs ect...) I need to come up with a way to identify each devices so I can load the proper library and this is what I came up with. Enjoy

getDeviceName: function () {
    var deviceName = '';

    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        Datalogic: function() {
            return navigator.userAgent.match(/DL-AXIS/i);
        },
        Bluebird: function() {
            return navigator.userAgent.match(/EF500/i);
        },
        Honeywell: function() {
            return navigator.userAgent.match(/CT50/i);
        },
        Zebra: function() {
            return navigator.userAgent.match(/TC70|TC55/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Datalogic() || isMobile.Bluebird() || isMobile.Honeywell() || isMobile.Zebra() || isMobile.BlackBerry() || isMobile.Android() || isMobile.iOS() || isMobile.Windows());
        }
    };

    if (isMobile.Datalogic())
        deviceName = 'Datalogic';
    else if (isMobile.Bluebird())
        deviceName = 'Bluebird';
    else if (isMobile.Honeywell())
        deviceName = 'Honeywell';
    else if (isMobile.Zebra())
        deviceName = 'Zebra';
    else if (isMobile.BlackBerry())
        deviceName = 'BlackBerry';
    else if (isMobile.iOS())
        deviceName = 'iOS';
    else if ((deviceName == '') && (isMobile.Android()))
        deviceName = 'Android';
    else if ((deviceName == '') && (isMobile.Windows()))
        deviceName = 'Windows';

    if (deviceName != '') {
        consoleLog('Devices information deviceName = ' + deviceName);
        consoleLog('Devices information any = ' + isMobile.any());
        consoleLog('navigator.userAgent = ' + navigator.userAgent);
    }

    return deviceName;
},

and this is an example of how it can be used:

initializeHandheldScanners: function () {
    if (DeviceCtrl.getDeviceName() == 'Zebra')
        DeviceCtrl.initializeSymbolScanner();

    if (DeviceCtrl.getDeviceName() == 'Honeywell')
        DeviceCtrl.initializeHoneywellScanner();

    if (DeviceCtrl.getDeviceName() == 'Datalogic')
        DeviceCtrl.initializeDatalogicScanner();
},

You can say thanks to Cory LaViska. I did this based on his work. Here is the link if you want to know more

https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript

Answer 4

You can use this snippet:

const getUA = () => {
    let device = "Unknown";
    const ua = {
        "Generic Linux": /Linux/i,
        "Android": /Android/i,
        "BlackBerry": /BlackBerry/i,
        "Bluebird": /EF500/i,
        "Chrome OS": /CrOS/i,
        "Datalogic": /DL-AXIS/i,
        "Honeywell": /CT50/i,
        "iPad": /iPad/i,
        "iPhone": /iPhone/i,
        "iPod": /iPod/i,
        "macOS": /Macintosh/i,
        "Windows": /IEMobile|Windows/i,
        "Zebra": /TC70|TC55/i,
    }
    Object.keys(ua).map(v => navigator.userAgent.match(ua[v]) && (device = v));
    return device;
}

console.log(getUA());

Answer 5

If you want to retrieve the mobile device name, you can use the following code snippet:

navigator.userAgentData
      .getHighEntropyValues([
        "architecture",
        "model",
        "platform",
        "platformVersion",
        "fullVersionList"
      ])
      .then((ua) => {
        const model = ua["model"];
        if (model) console.log("Phone: " + model);
      });

Please note that this code snippet will only work on Android devices.

Here are some example device names that you might get as output:

• Phone: POCO F1
• Phone: PIXEL 5
• Phone: SM-G955U

You can find an example implementation of this code here.

Answer 6

JavaScript navigator object is used for browser detection, it can be used to get browser information such as appName, appCodeName, userAgent, etc. Here we are using the property userAgent, it will return a string from which we can find the match for different devices like iPhone, Windows etc., and storing in another object named device. By looping through the object we can check the property which will be true, will be printed on page.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device</title>
</head>

<body>
    <script>
        const UserAgent = navigator.userAgent
        const device = {
            iPad: /iPad/.test(UserAgent),
            iPhone: /iPhone/.test(UserAgent),
            Android: /Android/.test(UserAgent),
            windows: /Windows/.test(UserAgent)
        }

        for(dev in device){
            if(device[dev])
            document.writeln("You are using " + dev);
        }
        
    </script>
</body>

</html>

It may help you out to identify user's device :-)