javascriptandroiddeviceplatformsmartphone

Detecting device manufacturer (i.e. phone brand) with javascript

People have already talked about this issue on How can I find the mobile phone manufacturer using javascript on mobile browser and Detecting device brand

As we are experiencing this decade (i.e. 2020s) web app developers may find themselves in awkward situations where each device group can require slightly different ways of coding. It could be due to reasons regarding compatibility or optimization or both.

Hence the situation begs the question,

Is there an extensive javascript library out there that covers all or most common brands which can be used for tasks similar to this:

if(userDevice == "SONY")
{
//do stuff that is supported by Sony phones only
}
else if (userDevice == "HUAWEI")
{
//show stuff that will appear only on Huawei phones
}
else if (userDevice == "XIAOMI")
{
//show stuff that will appear only on Xiaomi phones
}
else if (userDevice == "???")
{
//show stuff that will appear only on ??? phones, etc
}

Here are some sources to check the popularity/market share for common brands, http://gs.statcounter.com/vendor-market-share/mobile and https://www.idc.com/promo/smartphone-market-share/vendor

There are paid services like https://deviceatlas.com/products/web but we'd rather have a free solution if possible

Solution

  • With platform.js and mobile-detect.js the detection range was too narrow as the phone that we tested was an "Unknown Phone" for them.

    mobile-detect.js might have a wider manufacturer(vendor) detection range than platform.js as you may see it in their code on https://github.com/hgoebl/mobile-detect.js/blob/master/mobile-detect.js but still some major brands are either poorly covered or totally missing in that one too. Including every single manufacturer seems to be beyond the limits of monolancers anyway. It's like trying to chart the world-map on your own by traveling on foot.

    And yet this exists: https://github.com/faisalman/ua-parser-js It looks like it is able to recognize a Sony phone. (At least with mobile Chrome, it does. Tested with mobile Firefox but it didn't work.) As for Huawei unfortunately it didn't recognize it. Still it may offer some use and to test it you can download it (preferably minified) and use it with some code like this

    <script src="ua-parser.min.js" charset="utf-8"></script>
<script type="text/javascript">

var parser = new UAParser();
var result = parser.getResult();
console.log(result.device.vendor);

// This worked
var userDevice = result.device.vendor;
if(userDevice == "Sony")
{
// code to be run on Sony devices
}
</script>

    Note: As of 2024 ua-parser-js version 2 has been released with certain changes.

    Please check and verify with the most recent documentation for ua-parser-js as it is frequently updated.