Detecting Mobile vs. Desktop Browsers in JavaScript

Photo by Linus Mimietz on Unsplash

Detecting the type of device a user is browsing from is essential for many reasons, such as optimizing content for mobile or desktop devices, ensuring compatibility with device-specific features, and improving the overall user experience. In this article, we will discuss various techniques for detecting mobile vs. desktop browsers in JavaScript, along with their pros and cons.

User Agent String Detection

A user agent string is a piece of information sent by the browser to the server, which provides details about the browser, its version, and the operating system. You can access the user agent string in JavaScript using the navigator.userAgent property. By parsing the user agent string, we can determine if the user is on a mobile or desktop device.

One common method for detecting mobile devices is to use regular expressions (regex) to search for specific keywords in the user agent string. Here’s a simple example:

function isMobile() {
  const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  return regex.test(navigator.userAgent);
}

if (isMobile()) {
  console.log("Mobile device detected");
} else {
  console.log("Desktop device detected");
}

While user agent string detection is relatively simple to implement, it has several limitations:

• It relies on specific keywords in the user agent string, which can change over time or be missing for certain devices.
• Some browsers allow users to change their user agent string, which can lead to inaccurate detection.
• User-agent string detection may not be future-proof, as new devices and browsers are released regularly.

Feature Detection

An alternative to user agent string detection is to check for device features that are unique to mobile or desktop devices. One such feature is touch capability. You can detect touch support in JavaScript using the following code:

function hasTouchSupport() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}

if (hasTouchSupport()) {
  console.log("Mobile device detected");
} else {
  console.log("Desktop device detected");
}

While this method is more reliable than user agent string detection, it is not foolproof. Some desktop devices, such as laptops with touchscreens, may be incorrectly identified as mobile devices.

Another feature-based approach is to detect the screen size and resolution of the device. Mobile devices typically have smaller screens and lower resolutions compared to desktop devices. You can check the screen size and resolution using the window.innerWidth, window.innerHeight, window.devicePixelRatio, and screen.width properties. Here's an example:

function isMobile() {
  const minWidth = 768; // Minimum width for desktop devices
  return window.innerWidth < minWidth || screen.width < minWidth;
}

if (isMobile()) {
  console.log("Mobile device detected");
} else {
  console.log("Desktop device detected");
}

This method has some limitations as well. For example, resizing the browser window on a desktop device could lead to a false positive. Additionally, as mobile devices’ screen sizes and resolutions continue to increase, this method may become less accurate.

Using Libraries for Detection

Mobile Detect is a popular JavaScript library that simplifies device detection by parsing the user agent string and providing a clean API to identify mobile devices. You can use it as follows:

import MobileDetect from 'mobile-detect';

const md = new MobileDetect(navigator.userAgent);
if (md.mobile()) {
  console.log("Mobile device detected");
} else {
  console.log("Desktop device detected");
}

Bowser is another library that offers user agent string parsing and device detection. It also provides additional information about the browser, operating system, and device type. Here’s an example:

import Bowser from 'bowser';

const parser = Bowser.getParser(navigator.userAgent);
if (parser.getPlatformType() === 'mobile') {
  console.log("Mobile device detected");
} else {
  console.log("Desktop device detected");
}

Platform.js is a lightweight library that provides information about the browser, operating system, and device type by parsing the user agent string. It can be used as follows:

import platform from 'platform';

if (platform.isMobile) {
  console.log("Mobile device detected");
} else {
  console.log("Desktop device detected");
}

Best Practices

• Favor feature detection over user agent string detection whenever possible, as it is more reliable and future-proof.
• Use libraries to simplify detection and improve accuracy.
• Combine multiple techniques for more robust detection.
• Continuously test and update your detection code to ensure compatibility with new devices and browsers.

Conclusion

In this article, we discussed various techniques for detecting mobile vs. desktop browsers in JavaScript, including user agent string detection, feature detection, and library-based detection. Each technique has its advantages and limitations, and no single method is perfect. Hope you find this helpful.

Thanks for reading, hope to catch you in the next article.

Not a Medium member? Support me here by becoming one.