Detect if device is iOS

A deep dive into iOS detection

The fast answer mostly covers basic scenarios but fails to recognize specific iOS devices due to the similarities shared with other OS.

Mind the gaps: iPadOS 13 and beyond

Starting with iPadOS 13, the iPad began identifying itself as a desktop device, and this changed the game. Here, we turn to navigator.platform and navigator.maxTouchPoints to fortify the detection, using the multi-touch capabilities exclusive to iOS as an identifier.

// Oh, you identify as a Mac? Sure, but can you multi-touch like one?
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);


The touch of iOS

Touch capability detection serves a dual purpose: it both identifies the touch-capable iOS devices and also throws Android and Windows touch devices off the iOS scent.

// Just touch the screen, don't be shy!
const hasTouch = 'ontouchend' in document;


Regex magic with navigator.platform

This regex test helps to rule out the non-iOS platforms from the mix:

// You can't hide, iOS! You leave a mark on the platform.
const isIOS = /iPhone|iPad|iPod/.test(navigator.platform);


Detect HTML5 features: Bring in the big gun, Modernizr

Modernizr helps us target those HTML5 features distinctive to iOS, and bundles those with the platform checks.

// Modernizr is not just a trend, it's a necessity!
const isIOS = Modernizr.touch && /iPhone|iPad|iPod/.test(navigator.platform);


All aboard the video playback train

iOS has unique video playback behaviors, so checking for inline playback support can give us an edge here:

// I like to move it, move it (plays inline)
const supportsInlineVideo = 'playsInline' in document.createElement('video');


An audio hiccup, the iOS tell-tale

On iOS 12 and below, scripts can't control the audio element's volume - an insight we can exploit here:

// Shh! The volume control is being sneaky.
const hasIOSAudioQuirk = typeof Audio !== 'undefined' && !(new Audio()).canControlVolume;


A variable for cleaner code

We set a variable for later. It makes the code easier to handle and more human-readable.

// iOS in code: A memoir
let _iOSDevice = isIOS;


Additional considerations

Wolves in sheep’s clothing: Browser extensions

Browser extensions or even the user could change the userAgent or platform strings. Be aware of these potential imposters.

Have you heard the IE tale?

When handling legacy browsers is a necessity, an additional IE check helps:

// When IE comes knocking, should we answer back?
const isIE = /*@cc_on!@*/false || !!document.documentMode;


The iOS 13 paradigm

With iOS 13, Apple made iPads more desktop-like, which breaks traditional detection methods; a potential pitfall to watch out for!