Gathering data about your clients and their preferences is a fundamental strategy in improving your product or service. By understanding your client base better, you can make informed decisions on how to enhance their experience and meet their specific needs.

For instance, when you notice that a significant portion of your clients primarily use mobile devices, it becomes crucial to invest in making your website 100% responsive and mobile-friendly. This means ensuring that the layout and design adapt seamlessly to various screen sizes, enabling a smooth and enjoyable browsing experience on smartphones and tablets. Mobile users should have easy access to all the features and content on your website without any issues related to responsiveness. Likewise, if you find that the majority of your users prefer IOS devices, it's not only about making your website mobile-friendly but also about paying special attention to the intricacies of the Safari browser.

Client data can be a valuable asset in tailoring your product or service to meet the demands and expectations of your audience. Whether it's making your platform mobile-responsive for mobile users or fine-tuning it for a specific browser, this approach allows you to provide a more personalized and user-centric experience, ultimately leading to greater success and customer satisfaction.

This guide delves into the techniques for retrieving device model names from web browsers on various platforms, regardless of whether your users are on a desktop, a Windows PC, a Mac, or a Linux machine. We'll also tackle the unique challenge presented by iPhones, where user agents don't readily provide model names. By the end of this guide, you'll be well-equipped to capture device model names on any browser and platform.

To get the device information, we'll make use of the user-agent property.

User Agent property

The User-Agent property is a fundamental part of web browser technology. It contains information about the user's browser, operating system, and sometimes even the device being used. This data helps websites tailor their content and design to ensure compatibility and optimal performance for the visitor's specific browser and device. Web developers can analyze the User-Agent string to adapt their websites, making them responsive and user-friendly for a diverse range of browsing environments. You can read more about this here.

Desktop Client

For Desktop Clients, it is a simple oneliner to get the user agent list in below code:

const deviceName = navigator?.userAgentData?.platform || navigator?.platform;

Here we first check in the userAgentData property used by most browsers but for some, this value is stored in the platform property so we used a conditional.

Note: The value returned here would be:

• Win32 for Windows
• Linux for Linux
• MacIntel for Mac Systems

Sometimes both these properties can be undefined due to a number of reasons.

Android Client

For Android devices, the approach is simple as well. The following can be used to get the user agent:

const androidUserAgentString = window.navigator.userAgent.slice(window.navigator.userAgent.indexOf("Android"));
const androidDeviceName = androidUserAgentString.slice(androidUserAgentString.indexOf("; ") + 1, androidUserAgentString.indexOf(")"));

IOS Client

For IOS devices, there is a caveat. The browser does not hold the exact model number all we get is "iPhone" but is it iPhone 14 or iPhone XS? For this, we need to have a workaround. The workaround although not perfect can still give the model number in the majority of situations.

For this, we simply use the device's height and width to find the model. Below we have defined a map that relates the device's dimensions with the device name. Then we can simply use those to get a probable model name. Phones with the same dimensions are naturally grouped together.

const iosDeviceMapping = new Map([
  ["320x480", "IPhone 4S, 4, 3GS, 3G, 1st gen"],
  ["320x568", "IPhone 5, SE 1st Gen,5C, 5S"],
  ["375x667", "IPhone SE 2nd Gen, 6, 6S, 7, 8"],
  ["375x812", "IPhone X, XS, 11 Pro, 12 Mini, 13 Mini"],
  ["390x844", "IPhone 13, 13 Pro, 12, 12 Pro"],
  ["414x736", "IPhone 8+"],
  ["414x896", "IPhone 11, XR, XS Max, 11 Pro Max"],
  ["428x926", "IPhone 13 Pro Max, 12 Pro Max"],
  ["476x847", "IPhone 7+, 6+, 6S+"],
  ["744x1133", "IPad Mini 6th Gen"],
  [
    "768x1024",
    "IPad Mini (5th Gen), IPad (1-6th Gen), iPad Pro (1st Gen 9.7), Ipad Mini (1-4), IPad Air(1-2)  ",
  ],
  ["810x1080", "IPad 7-9th Gen"],
  ["820x1180", "iPad Air (4th gen)"],
  ["834x1194", "iPad Pro (3-5th Gen 11)"],
  ["834x1112", "iPad Air (3rd gen), iPad Pro (2nd gen 10.5)"],
  ["1024x1366", "iPad Pro (1-5th Gen 12.9)"],
]);

const screenResolution = ${window.screen.width}x${window.screen.height};
const device = iosDeviceMapping.get(screenResolution);

The list will obviously need to be updated as more phones get released. There are solutions where we can access the OS API to get the exact model but for most cases this information is sufficient.

For example, if we want to know the exact model so we can see which model most users have and we can test responsiveness on that, this information is enough since all phones have the same dimensions.

Feel free to use more specific solutions as per your use case. The ones I found while researching but did not try thoroughly are:

Full Gist

You can use this gist which combines all that we discussed above to find the device information for all possible platforms, handling edge cases and missing values:

Bonus: Integration with React and Google Analytics

One of the most common use cases of getting device information is to send it to some analytics tool that can use this to classify users. Below is a snippet to use the above gist with Google Analytics 4 (the latest version) in a react app:

import ReactGA from "react-ga4";

ReactGA.initialize(`${process.env.REACT_APP_GA_ID}`, {
  gaOptions: {
    device_name: getDeviceName(),
    page_location: window.location.href,
  },
});

Hope this was useful to you guys. Happy Coding!!🚀🚀