This article, based on StackOverflow, compiles five methods for detecting mobile browsers using JavaScript.

1. navigator.userAgent

The simplest method is to analyze the browser's user agent string, which contains device information. JavaScript uses the navigator.userAgent property to retrieve this string. If it contains keywords like 'Mobi', 'Android', 'iPhone', etc., the device can be identified as mobile.

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
  // Current device is a mobile device
}

// Alternate approach
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // Current device is a mobile device
}

This method is convenient but unreliable since users can modify the user agent string to make a mobile browser appear as a desktop browser. Chromium-based browsers also have navigator.userAgentData for similar functionality, parsing the user agent string into an object with a mobile property indicating if the user is on a mobile device.

const isMobile = navigator.userAgentData.mobile;

Note: Apple's Safari and Firefox browsers do not support this property.

Additionally, the deprecated navigator.platform property can be used for detecting the user's operating system.

if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
  // Current device is a mobile device
}

2. window.screen, window.innerWidth

Another method involves determining if it's a mobile device based on screen width. The window.screen object provides screen information, and window.innerWidth returns the width of the browser window.

if (window.screen.width < 500) {
  // Current device is a mobile device
}

For responsive design, window.innerWidth can be used to determine browser width categories.

const getBrowserWidth = function() {
  if (window.innerWidth < 768) {
    return "xs";
  } else if (window.innerWidth < 991) {
    return "sm";
  } else if (window.innerWidth < 1199) {
    return "md";
  } else {
    return "lg";
  }
};

3. window.orientation

Detecting screen orientation is a third method. The window.orientation property retrieves the current screen orientation, available only on mobile devices.

if (typeof window.orientation !== 'undefined') {
  // Current device is a mobile device
}

Note: iPhone's Safari browser does not support this property.

4. Touch Events

For mobile browsers, DOM elements can be checked for touch event support using the ontouchstart property. Desktop devices lack this property.

function isMobile() {
  return ('ontouchstart' in document.documentElement);
}

// Alternate approach
function isMobile() {
  try {
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
}

5. window.matchMedia()

The final method involves combining CSS to judge mobile devices. The window.matchMedia() method checks if a specified CSS media query is true.

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

In this example, if the screen width is less than 760 pixels, it assumes the current device is a mobile device.

Additionally, pointer accuracy can be used for detection.

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

Here, pointer:coarse signifies that the device's pointer is imprecise, suitable for touch-based devices like smartphones.

Some devices support multiple pointers, e.g., both mouse and touch. any-pointer:coarse can be used to check if any pointer is imprecise.

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

6. Utility Packages

In addition to the above methods, pre-built utility packages are available. One such recommendation is react-device-detect, supporting various levels of device detection.

import { isMobile } from 'react-device-detect';

if (isMobile) {
  // Current device is a mobile device
}