What exactly does "mobile" refer to in UAParser.js? Phones only? Or is it phones plus some tablets? Or all phones and all tablets?

[The-Linguist]

Many thanks to the awesome people who make life so much easier for developers. As you know different styles and different code for different devices is becoming more and more inevitable. The evolution of the internet has made it critical that we detect the user's device type accurately to make our apps function better and look better.

As of today (June2023), possible device types (according to the readme) in UA-Parser-js are: console, mobile, tablet, smarttv, wearable, embedded. So "phone" is currently not listed as a possible device type. And yet, the significant issue of identifying "phone" users and separating them from "tablet" users is becoming ever more essential. In this regard, the humbly asked main question is,

• What would be a good way to identify phones?

• Can it already be done with the current version of UA-Parser-js library? (Which probably depends on what mobile means and if mobile means "phones + tablets" then would mobile minus tablet reliably equal phone?)

It would be great to hear from the respected members of the nice community here. I am hoping that this topic will stay open for a while until at least a few good ideas show up and help. If you can, please spend a few minutes to share your useful knowledge with everyone. It could be much needed.

[The-Linguist]

I actually asked ChatGPT about UAParser.js and its response was basically telling me to judge it by the screen size. But I am rather reluctant to do that. So I'm still searching for a more reliable way to do it. Anyhow, here is the code suggested by ChatGPT:

if (result.device.type === "mobile") {
  if (result.device.screen && result.device.screen.width >= 600) {
    console.log("Tablet");
  } else {
    console.log("Phone");
  }
} else {
  console.log("Not a mobile device");
}

[The-Linguist]

Please correct me if I'm wrong but when I read the source at https://github.com/faisalman/ua-parser-js/tree/master/src/main it looks like mobile = phone

except for the very last part where it says generic android device

            ////////////////////
            // MIXED (GENERIC)
            ///////////////////

            /droid .+?; ([^;]+?)(?: bui|\) applew).+? mobile safari/i           // Android Phones from Unidentified Vendors
            ], [MODEL, [TYPE, MOBILE]], [
            /droid .+?; ([^;]+?)(?: bui|\) applew).+?(?! mobile) safari/i       // Android Tablets from Unidentified Vendors
            ], [MODEL, [TYPE, TABLET]], [
            /\b((tablet|tab)[;\/]|focus\/\d(?!.+mobile))/i                      // Unidentifiable Tablet
            ], [[TYPE, TABLET]], [
            /(phone|mobile(?:[;\/]| [ \w\/\.]*safari)|pda(?=.+windows ce))/i    // Unidentifiable Mobile
            ], [[TYPE, MOBILE]], [
            /(android[-\w\. ]{0,9});.+buil/i                                    // Generic Android Device
            ], [MODEL, [VENDOR, 'Generic']]

(If I am not misunderstanding) this means that the so-called Generic Android Device is the only case where we could maybe check the screen size and assume that it is a phone if the screen width+height is smaller than a certain value and treat it as a tablet otherwise.

[chenyuan-new]

Please correct me if I'm wrong but when I read the source at https://github.com/faisalman/ua-parser-js/tree/master/src/main it looks like mobile = phone

except for the very last part where it says generic android device

            ////////////////////
            // MIXED (GENERIC)
            ///////////////////

            /droid .+?; ([^;]+?)(?: bui|\) applew).+? mobile safari/i           // Android Phones from Unidentified Vendors
            ], [MODEL, [TYPE, MOBILE]], [
            /droid .+?; ([^;]+?)(?: bui|\) applew).+?(?! mobile) safari/i       // Android Tablets from Unidentified Vendors
            ], [MODEL, [TYPE, TABLET]], [
            /\b((tablet|tab)[;\/]|focus\/\d(?!.+mobile))/i                      // Unidentifiable Tablet
            ], [[TYPE, TABLET]], [
            /(phone|mobile(?:[;\/]| [ \w\/\.]*safari)|pda(?=.+windows ce))/i    // Unidentifiable Mobile
            ], [[TYPE, MOBILE]], [
            /(android[-\w\. ]{0,9});.+buil/i                                    // Generic Android Device
            ], [MODEL, [VENDOR, 'Generic']]

(If I am not misunderstanding) this means that the so-called Generic Android Device is the only case where we could maybe check the screen size and assume that it is a phone if the screen width+height is smaller than a certain value and treat it as a tablet otherwise.

@The-Linguist i think you are right. But actually the Generic case is rare, you can just use result.device.type === "mobile" to determine whether a device is phone. I use this and it works fine for me

[The-Linguist]

OK. Here is the final thing that works for me,

var deviceDetector = {device:"desktop",isMobile:false}; // Defaults
window.addEventListener('DOMContentLoaded', function(){
  const ua = navigator.userAgent;
  const parser = new UAParser(ua);
  if (parser.getDevice().type) { // Check if is available » Otherwise throws an error like: Cannot use toLowerCase with undefined
    if (parser.getDevice().type.toLowerCase() == "tablet") {
      deviceDetector.device = "tablet"; deviceDetector.isMobile = true;
    } else if (parser.getDevice().type.toLowerCase() == "mobile") {
      deviceDetector.device = "phone"; deviceDetector.isMobile = true;
    } else { } // Do not change the defaults and assume that it is a desktop
  }
}, { once: true });

With this code, if a device is neither a tablet nor a phone it will be treated as a desktop. Also with this code deviceDetector.isMobile will return true on both tablets and phones. To detect tablets and phones separately, we can use,

if (deviceDetector.device == "tablet") {
  // Do things that are needed only on tablets
} else if (deviceDetector.device == "phone") {
  // Do things that are needed only on phones
} else {
  // Do things that are needed only on desktops
}