How Can I Reliably Detect if a Browser is Running on an iOS Device?

Identifying iOS Devices

In contrast to feature detection, the question seeks to establish a method for determining whether a browser is operating on an iOS device. Despite the significance of feature detection, the necessity to detect iOS devices arises from their unique handling of videos, as highlighted in a related Stack Overflow discussion.

Detection Methods

Navigating the realm of device detection, we encounter two approaches:

1. User Agent Sniffing: This method relies on examining the browser's user agent string to identify the device type. However, it is crucial to note the potential pitfalls of this approach:

   • User agents can be spoofed by users or browser extensions.
   • iOS 13 iPads now exhibit user agents identical to macOS 13 computers.

2. Feature Inference: This technique leverages known feature availability timelines for different iOS versions. For instance, we know that:

   • History API was introduced in iOS 4
   • matchMedia API debuted in iOS 5
   • webAudio API was unveiled in iOS 6
   • WebSpeech API emerged in iOS 7

Caution: This approach relies on the assumption that these features will not be deprecated in future iOS versions.

Implementing the Detection

To detect an iOS device, you can employ the following code:

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document);
}

To detect the iOS version, you can use the following code (though be aware of its limitations):

function iOSversion() {

  if (iOS) {
    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';
}

The above is the detailed content of How Can I Reliably Detect if a Browser is Running on an iOS Device?. For more information, please follow other related articles on the PHP Chinese website!