Build Your Own JavaScript Library to Detect Mobile Browsers

Mobile detection has always been a crucial aspect of app development. It is relevant both for apps, but also software and websites. There are countless reasons to check for mobile browser agents. Most importantly, the ability to render a unique user experience.

The UAParser.js library alone gets millions of weekly package downloads. And, in most cases, it is enough if you’re building something from scratch. But, what about alternative ways to detect mobile browsers with JavaScript?

Sometimes you might just want a simple solution that does the job without any libraries. And in this article, I am gonna lay out for you a handful of JavaScript techniques for detecting mobile users. Let me know if I missed any!

navigator.userAgent

The holy grain of browser detection is the navigator.UserAgent property.

if (/Android|iPhone/i.test(navigator.userAgent)) {
  // This checks if the current device is in fact mobile
}

// an alternative structure to check individual matches
if (
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // making individual checks
}

This is, of course, a very primitive way of doing it. It can easily be manipulated as the User-Agent property can be spoofed. But, because it does the job you can still use it in a variety of projects.

E.g. Landing pages or making a custom redirect to a mobile version.

TouchEvent

One method to detect mobile users is to check if the device has a touch screen.

Using the GlobalEventHandlers.ontouchstart property you can make a simple check to see how the user interacted with your app. If the interaction came from a touch screen, you can then return a mobile version of the app or page.

if ("ontouchstart" in document.documentElement)
{
  // content for touch-screen (mobile) devices
}
else
{
  // everything else (desktop)
}

Touch-screen devices like Surface do not have this property. So, users coming from desktop-based touch devices will still see the desktop version of your pages.

Window.matchMedia()

TheWindow.matchMedia() is one of the best properties for detecting mobile users with JavaScript. And it is so because it lets you interact with CSS directly.

In a lot of cases, media queries are superior because they have built-in mobile detection tools. For example, you can make a call to check if “pointer:coarse” is true.

This specific statement validates whether the device’s pointer is fine or coarse.

let isMobile = window.matchMedia("(pointer:coarse)").matches;

Alternatively, the device might have both a fine and coarse pointer. For this use case, we can check if any pointers are coarse.

let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Keep in mind that this only validates the query as true or false. A more refined way to check for mobile devices is to use media queries directly.

let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

This query will directly check the max-width of the device and assert whether it matches the criteria. Again, this is quite a lot of work for getting all devices correctly. As such, it’s easier to use a pre-built library with all the devices types already defined.

Libraries for Detecting Mobile Devices

For this section, I’m going to list the most popular JavaScript libraries for detecting mobile devices. Again, I emphasize that these are specific to JavaScript. Refer to the docs for proper implementation in your app.

UAParser.js

As far as complete libraries go, UAParser is the best there is. With more than 10 million weekly downloads on npm alone – UAParser is the defacto solution for detecting mobile devices. As the name gives it away – the library works by parsing User-Agent strings.

However, what makes it so popular is the fact that you can parse hundreds of device variations. And, all of it is very well documented. You can go from practical device vendors to more intricate detection patterns like CPU architecture.

GitHub Documentation

mobile-detect.js

This is a fairly straightforward port of the Mobile Detect library for PHP, provided to the community by Heinrich Goebl. The library itself uses User-Agent for detection, so like we discussed earlier – not the best option.

Still, it should do the job when it comes to practical HTML templates or portfolio projects.

GitHub Documentation

isMobile

Here we have another take on the User-Agent Navigator property from Kai Mallea. While still a simplistic solution, I like that isMobile provides a variety of specifications. For example, you can test for any mobile devices or specific ones like phone or tablet.

GitHub Documentation

react-device-detect

Are you a React.js developer?

Then this library from Michael Laktionov is for you. It works as you would expect – first the library detects device type, then renders the view based on that type. Works flawlessly with component integration, and can be further customized through API calls.

One interesting fact is the number of selectors this library includes. It covers devices like smart TVs, wearables, a variety of iPhone devices, and much more. This gives you a broad selection of design choices when building an app for a specific device.

GitHub Documentation

First Published here