Detect if device is iOS

Detect if device is iOS

I’m wondering if it’s possible to detect whether a browser is running on iOS, similar to how you can feature detect with Modernizr (although this is obviously device detection rather than feature detection).
Normally I would favour feature detection instead, but I need to find out whether a device is iOS because of the way they handle videos as per this question YouTube API not working with iPad / iPhone / non-Flash device

Solutions/Answers:

Solution 1:

Detecting iOS

I am not a fan of User Agent sniffing, but here is how you would do it:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

Another way is relying on navigator.platform:

var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

iOS will be either true or false

Why not MSStream

Microsoft injected the word iPhone in IE11’s userAgent in order to try and fool Gmail somehow. Therefore we need to exclude it. More info about this here and here.

Below is IE11’s updated userAgent (Internet Explorer for Windows Phone 8.1 Update):

Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0;
Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930) like iPhone OS 7_0_3
Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537


Easily add more devices, without using Regular Expressions:

function iOS() {

  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  if (!!navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return true; }
    }
  }

  return false;
}

iOS() will be either true or false

Note: Both navigator.userAgent and navigator.platform can be faked by the user or a browser extension.


Detecting iOS version

The most common way of detecting the iOS version is by parsing it from the User Agent string. But there is also feature detection inference*;

We know for a fact that history API was introduced in iOS4matchMedia API in iOS5webAudio API in iOS6WebSpeech API in iOS7 and so on..

Note: The following code is not reliable and will break if any of these HTML5 features is deprecated in a newer iOS version. You have been warned!

function iOSversion() {

  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    if (!!window.indexedDB) { return 'iOS 8 and up'; }
    if (!!window.SpeechSynthesisUtterance) { return 'iOS 7'; }
    if (!!window.webkitAudioContext) { return 'iOS 6'; }
    if (!!window.matchMedia) { return 'iOS 5'; }
    if (!!window.history && 'pushState' in window.history) { return 'iOS 4'; }
    return 'iOS 3 or earlier';
  }

  return 'Not an iOS device';
}

Solution 2:

This sets the variable _iOSDevice to true or false

_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);

Solution 3:

If you are using Modernizr, you can add a custom test for it.

It doesn’t matter which detection mode you decide to use (userAgent, navigator.vendor or navigator.platform), you can always wrap it up for a easier use later.

//Add Modernizr test
Modernizr.addTest('isios', function() {
    return navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
});

//usage
if (Modernizr.isios) {
    //this adds ios class to body
    Modernizr.prefixed('ios');
} else {
    //this adds notios class to body
    Modernizr.prefixed('notios');
}

Solution 4:

There is this custom Modernizr tests: https://gist.github.com/855078

Solution 5:

A simplified, easy to extend version.

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;

Solution 6:

The user-agents on iOS devices say iPhone or iPad in them. I just filter based on those keywords.