Detecting iOS / Android Operating systems

javascript

user-agent

os-detection

mobile-detection

byAlex Kataev·Feb 4, 2025

const detectOS = () => /android/i.test(navigator.userAgent) ? "Android" :
                     /iPad|iPhone|iPod/.test(navigator.userAgent) ? "iOS" : "The dark void";

console.log(detectOS()); // 'Android', 'iOS', or 'The dark void'

This little piece of JavaScript magic tosses your navigator.userAgent into a ternary cauldron and tells you whether it's "Android", "iOS", or stumbled from the dark void (we can't identify it). Remember, the userAgent can wear disguises (spoofing).

Short but mighty: Extended detection

const modifyAppLink = os => { 
    const downloadBtn = document.getElementById('downloadBtn');
    downloadBtn.href = os === 'Android' ? 'https://play.google.com' : 'https://apple.com';
}

Your detectOS function is the life of the party now. It’s showing off, making sure users get the right app link for their OS. This JavaScript eye candy gets the job done, but stay wary of the userAgent's party tricks (spoofing).

Visualising userAgent: No magic, just logic

Visualising the OS detection process can help. Imagine your userAgent is at a party:

          🚪
      /        \
  👤 iOS      👤 Android 
// iOS users go left, Android users go right

To detect:

const partyGoer = navigator.userAgent || navigator.vendor || window.opera;
if (/iPad|iPhone|iPod/.test(partyGoer)) {
    // 👈 iOS visitors go to the dance floor
} else if (/android/i.test(partyGoer)) {
    // 👉 Android users to the snack bar
}

// arguing over who's got the best version of club sandwich 🥪 👀

In code, we're the host, navigating the party-goers (userAgent) to the right spots.

More on userAgent: Never trust a party-crasher

Got a devious navigator.userAgent at your tech party? No worries, navigator.platform packs a strong punch, especially with other platforms up its sleeve.

Beyond phones: Uninvited guests or just shy?

Expand your detection horizons beyond phones. Tablets and other lesser-known iOS devices are fashionably late to the party — ensure they got their invite, too.

React and server-side guest list

Hosting a React party? Try react-device-detect from npm. If you're checking the guest list server-side with PHP, remember, HTTP headers can be more reliable, especially if JavaScript had too much to drink.

Libraries: the party planners

You're not in this alone. Libraries like Mobile-Detect.js or Platform.js are like your party planners, handling the difficult guests and making sure everyone's what they claim to be.

Stay tuned: The party keeps evolving

New devices are like surprise guests. Stay updated with the latest user agent strings, and follow resources like caniuse.com for the latest dance trends (compatible features).

Spoofers: Masqueraders or party poopers?

Be wary of potential masqueraders. Use feature detection alongside user agent checks to unmask deceptive guests.

Drunk userAgent? Call a cab!

Complex user agents can be a headache. Look for libraries that can arrange a cab (structured data) for your drunk agents.

Make it a memorable night

Dynamic content customization, interactive light shows (element styling), and ushering guests to the right zones (redirects based on OS) - all this leads to an unforgettable party (improved user interaction).