Introduction

In this post, we will learn how to detect a mobile browser using JavaScript. There are various ways to detect a mobile browser. We will discuss some of the most popular methods.

It is quite common for websites to want to know if their visitors are using a mobile device. This can be used to tailor the user experience, for example by displaying a simplified version of the site. It can also be used to detect if the user is on a low-end device and serve them a low-resolution image instead of a high-resolution one.

Why you might want to detect a mobile browser?

As a web developer, you might want to detect whether the website visitor is using a mobile browser. This is important because you might want to:

Send them to a different / mobile-optimized version of your website
Serve them different content (e.g. less content)
Block them from accessing certain features of your website
Track mobile traffic separately from desktop traffic

How to detect a mobile browser?

Method 1: Using the User-Agent, navigator.userAgentData

The easiest way to detect a mobile browser is to use the user agent string. The user agent string is a piece of information that your browser sends to the website you're visiting. It tells the website what kind of browser you're using, what operating system you're using, and some other information.

The User-Agent header is a request header sent by the client to the server. It contains information about the client's operating system, browser type, and version. The User-Agent header is often used by websites to tailor the content that is served to the client.

We can use the User-Agent header to detect a mobile browser. The user-agent strings of most mobile browsers contain the word "Mobile" or "Mobi". We can use this to our advantage.

The following code snippet checks if the user-agent string contains the word "Mobile". If it does, we can assume that the client is using a mobile browser.

if (navigator.userAgentData.mobile) {
  // client is using a mobile browser
}

Method 2: Using navigator.userAgent

Mobile browsers usually have a different user agent string to regular desktop browsers. This can be used to detect if the browser is a mobile browser. However, it is worth noting that some mobile browsers spoof their user agent string to look like a regular desktop browser. This can be used to improve compatibility with websites that are not designed for mobile browsers.

You can check the user agent string yourself by opening up your browser's JavaScript console and typing in navigator.userAgent.

If you're using a mobile browser, you'll see something like this:

Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1

If you're using JavaScript to detect the user's browser, you can use the navigator.userAgent property. This property returns a string containing the user agent header sent by the browser to the server.

The user agent string for a mobile browser typically contains the word "Mobile" or "Tablet". You can use this string to detect whether the user is using a mobile browser.

if (navigator.userAgent.indexOf("Mobile") !== -1) {
  // User is using a mobile browser
}

if (navigator.userAgent.indexOf("Tablet") !== -1) {
  // User is using a tablet browser
}

Method 3: Using the Screen Resolution

Another popular method to detect a mobile browser is to check the screen resolution. Mobile devices have a smaller screen resolution than desktop computers. We can use this fact to our advantage and detect if the device is a mobile device or not.

if(( window.innerWidth <= 1280 ) && ( window.innerHeight <= 720 )) {
  document.location = "mobile.html";
}

The code above will redirect the user to the mobile.html page if the screen resolution is less than or equal to 1280x720 pixels, or 800x600 pixels in some cases depending on who you are targeting.

This method is not as reliable as the first method because some mobile devices have a high screen resolution. For example, most newer phones such as Samsung Galaxy S22 has a screen resolution of 1080 x 2340 and Samsung Galaxy Z Fold4 has a screen resolution of 1812 x 2176.

Another way to detect if a browser is a mobile browser is to check if the viewport is set to a width of less than 768px. This is the width of most mobile devices. If the viewport is set to a width less than 768px, it's likely that the browser is a mobile browser. You can use the following JavaScript code to check the viewport width:

if (window.innerWidth <= 768) {
  // The browser is a mobile browser
} else {
  // The browser is not a mobile browser
}

Conclusion

In this article, we have seen how to detect a mobile browser or if its a mobile phone using JavaScript. Use the method that best applies to your application and usecase.