Detecting iOS Version on a Web Page

Question

Is there any way (using Javascript, PHP, etc) to detect the version of an iOS page, when the page is visited on MobileSafari?

Answer 1

Here's a bit of JS to determine iOS and Android OS version.

Tested with actual user agent strings for iOS 4.3 to 6.0.1, and Android 2.3.4 to 4.2

var userOS;    // will either be iOS, Android or unknown
var userOSver; // this is a string, use Number(userOSver) to convert

function getOS( )
{
  var ua = navigator.userAgent;
  var uaindex;

  // determine OS
  if ( ua.match(/iPad/i) || ua.match(/iPhone/i) )
  {
    userOS = 'iOS';
    uaindex = ua.indexOf( 'OS ' );
  }
  else if ( ua.match(/Android/i) )
  {
    userOS = 'Android';
    uaindex = ua.indexOf( 'Android ' );
  }
  else
  {
    userOS = 'unknown';
  }

  // determine version
  if ( userOS === 'iOS'  &&  uaindex > -1 )
  {
    userOSver = ua.substr( uaindex + 3, 3 ).replace( '_', '.' );
  }
  else if ( userOS === 'Android'  &&  uaindex > -1 )
  {
    userOSver = ua.substr( uaindex + 8, 3 );
  }
  else
  {
    userOSver = 'unknown';
  }
}

Then to detect a specific version and higher, try:

if ( userOS === 'iOS' && Number( userOSver.charAt(0) ) >= 5 ) { ... }

Answer 2

You should be able to parse the UserAgent String for it.

Here's an example User Agent String that declares the OS to be 4.3.1

Mozilla/5.0 (iPad; U; CPU OS 4_3_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8G4 Safari/6533.18.5

Answer 3

PHP

function ismobilesafari() {
    if( preg_match( '/(iPod|iPhone|iPad)/', $_SERVER[ 'HTTP_USER_AGENT' ] ) ) {
        return true;
    } else {
        return false;
    }
}

JS

function ismobilesafari() {
    if( navigator.userAgent.match( /(iPod|iPhone|iPad)/ ) ) {
        return true
    } else {
        return false
    }
}

Referenced by: http://alan.edward.es/posts/detecting-the-awesomeness-that-is-mobile-safari/

Answer 4

You really would be checking the version of the browser which can tell you what is supported or not. There's an article here that gives some decent information on how to detect this and determine what it supports.

http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

Answer 5

You'll have to interrogate the $_SERVER['HTTP_USER_AGENT'] value in PHP (or its equivalent in JavaScript) and parse it. I would build a helper method that parses and decodes the user agent and returns the iOS device and version that is visiting your site/app.

The reference material you need is online over at Apple. Take a look at the "Using the Safari User Agent String" section.

Answer 6

You should not only detect if its an iOS device but also if the device runs on at least iOS 2.0. Because since 2.0 mulittouch and other important features are supported. A reference of features is on wikipedia.

Answer 7

In Javascript, you can do something like that:

function isIos() {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test(userAgent);
}

function getIphoneOSVersion() {
  let osVersion: any = 'Unknown';

  if (!isIos()) {
    return osVersion;
  }

  osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(window.navigator.userAgent);
  osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
  osVersion = osVersion.replaceAll('_', '.');
  return osVersion;
}