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 property. navigator.UserAgent 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 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. GlobalEventHandlers.ontouchstart 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() The is one of the best properties for detecting mobile users with JavaScript. And it is so because it lets you interact with CSS directly. Window.matchMedia() In a lot of cases, are superior because they have built-in mobile detection tools. For example, you can make a call to check if is true. media queries “pointer:coarse” This specific statement validates whether the device’s pointer is or . fine 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 pointers are coarse. any 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 alone – UAParser is the defacto solution for detecting mobile devices. As the name gives it away – the library works by parsing User-Agent strings. npm 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 mobile devices or specific ones like or . any phone tablet GitHub Documentation react-device-detect Are you a developer? React.js 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

Mozilla

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Build Your Own JavaScript Library to Detect Mobile Browsers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps