Check mobile device using JavaScript

Sometimes developers want to know whether the user is using a mobile browser or a desktop browser so that they can build corresponding user experience. Although in many cases responsive web design would help solve component alignment issues, there are performance related considerations in some cases where some code should not be ran or some feature should not be available if user is on mobile browser. or vice versa This post will summarize a few ways which are commonly used to check whether a user is on mobile device or not.

navigator.userAgent

The straightforward approach is to parse the user agent string from browser which contains device information like android, ios etc. The device would be considered as mobile device if the user agent contains mobi, ios, android etc. 

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
  // it is mobile browser
}

// another style
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // it is mobile browser
}

This method is simple but not reliable. Users can modify the user agent string to fake a desktop browser from a mobile device.

There is another property navigator.userAgentData in Chrome-like browsers which is an object containing different information about user agent. It has a property called mobile which indicates whether user is on a mobile device or not.

const isMobile = navigator.userAgentData.mobile; 

Safari and Firefox don't support this property yet.

window.screen，window.innerWidth

Another way is to use screen width to check whether it's on mobile. window.screen will return the screen information about the device and it has a property width.

if (window.screen.width < 500) {
  // it is mobile browser
}

If the screen width is less than some pixels, it is considered as on a mobile device. The drawback of this way is obvious. The check will be wrong if the device is in landscape mode or it's on some pad and also there is no clear definition on the pixel value to be used for the check.

Another similar way is using innerWidth which is the width of the visible part of the webpage.

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";
  }
};

window.orientation

window.orientation tells the mode of the screen, it can be portrait or landscaped, only mobile browsers would have this property defined. 

if (typeof window.orientation !== 'undefined') {
  // it is mobile browser 
}

Unfortunately Safari on iPhone doesn't support this property as well.

touch event

Mobile browsers would support ontouchstart event for DOM elements, on desktop browsers, this property is undefined.

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

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

window.matchMedia()

Since JavaScript can access style information of DOM elements and CSS has something called media query which offers responsive capabilities for web pages by using different styles at different conditions. In case a mobile query defined for mobile browsers are taking effect, it would be considered as on mobile device.

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

window.matchMedia() takes a media query as parameter and it will return an object. The object has a property matches which is a boolean value indicating whether the media query is in effect. 

Apart from screen width, can also use pointer property.

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

Since mobile devices don't support mouse, hence above can be used.

What other methods are you using and how reliable are they? Comments are welcomed.

Reference: JavaScript 侦测手机浏览器的五种方法 - 阮一峰的网络日志 (ruanyifeng.com)