Introduction

“Detecting a mobile browser” sounds simple, but the real question is usually what decision you want to make. If you only want a good layout on small screens, responsive CSS is usually the right answer. If you need server-side adaptation or analytics, device detection becomes more relevant, but it is still imperfect.

Modern browser guidance is to avoid heavy user-agent sniffing whenever possible. User-agent strings are inconsistent, can be spoofed, and increasingly expose less information than they used to, so feature detection and responsive design are usually more reliable.

Start With the Real Goal

There are several different goals that people collapse into “mobile detection”:

• Switch layout for narrow screens.
• Decide whether to show touch-oriented controls.
• Serve lighter assets to phones.
• Record analytics about mobile traffic.
• Work around a browser-specific bug.

Each goal has a different best solution. If your goal is layout, use CSS media queries. If your goal is feature support, test the feature itself. Only if your goal truly depends on device classification should you inspect user-agent data.

Responsive Design Is Usually Better Than Detection

For most web apps, this is enough:

1@media (max-width: 768px) {
2  .sidebar {
3    display: none;
4  }
5
6  .content {
7    padding: 1rem;
8  }
9}

This adapts the interface to the actual viewport instead of guessing from the browser identity. It also handles edge cases better, such as small desktop windows, tablets, foldables, and touch-enabled laptops.

Likewise, if you care about capabilities, detect the capability directly.

const supportsTouch = window.matchMedia("(pointer: coarse)").matches;
console.log("coarse pointer:", supportsTouch);

That answers a real UI question more reliably than “is this device mobile?”

If You Must Detect a Mobile Browser in JavaScript

Sometimes you really do need a coarse device classification. The traditional fallback is navigator.userAgent, usually checking for mobile tokens.

1function isProbablyMobile() {
2  return /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
3}
4
5console.log(isProbablyMobile());

This works for many common cases, but it is only a heuristic. It should not be treated as authoritative.

Some modern browsers also expose User-Agent Client Hints, including a mobile indicator. Where available, that can be cleaner:

1function isMobileByHint() {
2  if (navigator.userAgentData && typeof navigator.userAgentData.mobile === "boolean") {
3    return navigator.userAgentData.mobile;
4  }
5  return /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
6}
7
8console.log(isMobileByHint());

In practice, treat this as progressive enhancement. navigator.userAgentData is not universal, so you still need a fallback.

Server-Side Detection

If you must change server-rendered behavior, do the detection on the server with the incoming headers. For example, a Node.js server can inspect the User-Agent header.

1import http from "node:http";
2
3http.createServer((req, res) => {
4  const ua = req.headers["user-agent"] || "";
5  const mobile = /Mobi|Android|iPhone|iPad/i.test(ua);
6
7  res.writeHead(200, { "Content-Type": "application/json" });
8  res.end(JSON.stringify({ mobile }));
9}).listen(3000);

Even here, the same warning applies: use this only when you truly need classification. Do not build core functionality that breaks if the guess is wrong.

Common Pitfalls

A common mistake is using mobile detection to choose between “mobile site” and “desktop site” when responsive design would be simpler and more robust.

Another issue is assuming the user-agent string is stable. Browsers reduce or mask parts of it, some devices blur the phone-tablet distinction, and users can spoof it entirely.

Developers also often confuse “mobile browser” with “small viewport” or “touch support.” Those are different concepts. A desktop browser can have a small window, and a laptop can have touch input.

Finally, be careful with long regexes copied from old blog posts. They become hard to maintain and still miss new device families.

Summary

• For layout, prefer responsive CSS over mobile-browser detection.
• For capability decisions, detect the capability itself instead of the device class.
• If you truly need device classification, use a lightweight heuristic and accept that it is imperfect.
• 'navigator.userAgentData.mobile can help where supported, but it is not universal.'
• Avoid making critical application logic depend on user-agent sniffing alone.