Detecting Mobile Devices in JavaScript: A Practical Guide

When building responsive web applications, you sometimes need to detect whether a user is on a mobile device — not just based on screen size, but actual device type. This matters for things like touch interfaces, performance tuning, or redirecting to a mobile-optimized experience. The packages is-mobile, mobile-detect, mobile-device-detect, and ua-parser-js all aim to solve this, but with very different approaches, trade-offs, and levels of control.

📱 Detection Strategy: Simple Boolean vs Full Device Intelligence

is-mobile gives you a simple yes/no answer: is this a mobile device?

import isMobile from 'is-mobile';

// Basic usage
if (isMobile()) {
  // Apply mobile-specific logic
}

// You can also pass a custom User-Agent string
const ua = 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) ...';
if (isMobile({ ua })) {
  // ...
}

It’s lightweight and opinionated: if the UA matches known mobile patterns (iOS, Android, etc.), it returns true. No details — just a boolean.

mobile-detect offers more granularity: it tells you what kind of mobile device you’re dealing with.

import MobileDetect from 'mobile-detect';

const md = new MobileDetect(window.navigator.userAgent);

console.log(md.mobile());        // 'iPhone', 'Android', etc., or null
console.log(md.phone());         // 'iPhone' if it's a phone
console.log(md.tablet());        // 'iPad' if it's a tablet
console.log(md.os());            // 'iOS', 'Android', etc.

This is useful when your logic differs between phones and tablets, or you need to know the OS.

mobile-device-detect takes an even simpler route: it exports ready-to-use boolean flags.

import { isMobile, isTablet, isIOS, isAndroid } from 'mobile-device-detect';

if (isMobile) {
  // True for any mobile device
}

if (isIOS && isTablet) {
  // Specifically an iPad
}

No instantiation, no methods — just constants evaluated once at load time. Great for quick checks, but inflexible if you need to test arbitrary User-Agent strings (e.g., in server-side rendering or testing).

ua-parser-js doesn’t focus solely on mobile — it parses the entire User-Agent into structured data.

import UAParser from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

console.log(result.device.type);   // 'mobile', 'tablet', 'console', etc.
console.log(result.os.name);       // 'iOS', 'Android'
console.log(result.browser.name);  // 'Chrome', 'Safari'

You can then decide what “mobile” means in your app. Maybe you treat tablets differently than phones — ua-parser-js gives you the raw data to make that call.

⚙️ Flexibility: Runtime Checks vs Static Constants

Only is-mobile, mobile-detect, and ua-parser-js let you analyze arbitrary User-Agent strings. This is critical if you're doing detection on the server (e.g., in Next.js getServerSideProps) or writing tests.

// Server-side example with ua-parser-js
export async function getServerSideProps({ req }) {
  const ua = req.headers['user-agent'];
  const parser = new UAParser(ua);
  const isMobile = parser.getDevice().type === 'mobile';
  return { props: { isMobile } };
}

In contrast, mobile-device-detect reads navigator.userAgent only once when the module loads. That means:

• It won’t work in Node.js environments without a polyfill.
• You can’t test different device scenarios in the same runtime.
• It’s not suitable for SSR unless you replace the module during build (e.g., via Webpack aliases).

🧪 Accuracy and Maintenance

All four packages rely on User-Agent parsing, which is inherently fragile — browsers can spoof UAs, and new devices appear constantly. However, their maintenance status differs.

• ua-parser-js is actively maintained and uses a regularly updated regex pattern set (mirroring the widely used UAParser community project). It’s the most future-proof choice.
• mobile-detect hasn’t seen significant updates in years, and its regex patterns may miss newer devices.
• is-mobile is minimal and stable, but its detection logic is hardcoded and not easily extensible.
• mobile-device-detect appears unmaintained; its last meaningful update was several years ago, and it lacks support for many modern device patterns.

⚠️ Important: None of these should be your only method for responsive design. Always combine UA detection with feature detection (e.g., matchMedia('(max-width: 768px)')) and progressive enhancement.

🧩 Real-World Use Cases

Case 1: Lightweight Mobile Redirect

You run a legacy desktop site and want to redirect mobile users to /mobile.

• ✅ Best choice: is-mobile
• Why? You only need a boolean, and every byte counts on the landing page.

import isMobile from 'is-mobile';
if (isMobile() && !window.location.pathname.startsWith('/mobile')) {
  window.location.href = '/mobile';
}

Case 2: Adaptive UI Based on Device Type

Your app shows a compact layout on phones but a split view on tablets.

• ✅ Best choice: mobile-detect or ua-parser-js
• Why? You need to distinguish phones from tablets.

// With mobile-detect
const md = new MobileDetect(navigator.userAgent);
const layout = md.tablet() ? 'split' : md.phone() ? 'compact' : 'desktop';

Case 3: Server-Side Rendering with Device-Specific Props

You’re using Next.js and want to pre-render different content based on device.

• ✅ Best choice: ua-parser-js
• Why? It works reliably in Node.js and gives full control.

// pages/index.js
export async function getServerSideProps({ req }) {
  const parser = new UAParser(req.headers['user-agent']);
  const deviceType = parser.getDevice().type || 'desktop';
  return { props: { deviceType } };
}

Case 4: Quick Client-Side Feature Toggle

You want to enable a touch-friendly carousel only on mobile.

• ✅ Best choice: mobile-device-detect
• Why? It’s zero-config and tree-shakable if you only import isMobile.

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

function App() {
  return isMobile ? <TouchCarousel /> : <DesktopCarousel />;
}

But caution: this breaks in SSR unless handled carefully.

🔍 Summary Table

* Can be made SSR-safe with build-time replacements, but not out of the box.

💡 Final Recommendation

• If you only need a true/false for “is this mobile?” and care about bundle size → use is-mobile.
• If you need to distinguish phones from tablets and are okay with a slightly larger footprint → mobile-detect works, but verify it covers your target devices.
• If you’re doing server-side rendering or need maximum accuracy and future-proofing → ua-parser-js is the professional choice.
• Avoid mobile-device-detect in new projects — its lack of custom UA support and apparent abandonment make it risky for production use beyond trivial cases.

Remember: User-Agent sniffing is a fallback. Whenever possible, prefer CSS media queries, touch event detection ('ontouchstart' in window), or pointer media features (@media (pointer: coarse)). But when you do need UA-based logic, choose the right tool for your precision, environment, and maintenance needs.