With the release of iOS 13, detecting iOS devices has become a bit trickier. iPads are no longer recognized as iOS devices using the old methods due to new "desktop" options being enabled by default. Here is how you can now detect iOS devices:

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

The first condition checks for iOS versions below 13 or iPhones/iPads with Desktop mode disabled. The second condition accounts for iPadOS 13 in its default configuration, which may appear as Macintosh Intel but is actually the only Macintosh device with multi-touch capabilities.

While this method may seem like a hack rather than a perfect solution, it has proven to work reliably for many users.

P.S. It is also recommended to include an IE check when implementing this code:

let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream

All previous solutions mentioned do not work across all major browsers and iOS versions, including iOS 13. To address this issue, here is a comprehensive solution that caters to Safari, Chrome, and Firefox on all iOS iterations:

var isIOS = (function () {
    var iosQuirkPresent = function () {
        var audio = new Audio();

        audio.volume = 0.5;
        return audio.volume === 1;   // volume cannot be changed from "1" on iOS 12 and below
    };

    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var isAppleDevice = navigator.userAgent.includes('Macintosh');
    var isTouchScreen = navigator.maxTouchPoints >= 1;   // true for iOS 13 (and hopefully beyond)

    return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));
})();

Please note that the code snippet prioritizes readability over conciseness or performance.

Here is an explanation of how the solution works:

• If the user agent contains any of "iPod|iPhone|iPad," it indicates the device is running iOS. If not, the process continues...

• If the user agent does not contain "Macintosh," the device is non-Apple and therefore not running iOS. If it does, the device is identified as an Apple product, so the evaluation proceeds...

• If maxTouchPoints is equal to or greater than 1, the Apple device has a touch screen and is hence presumed to be running iOS since Macs do not have touch screens. It's important to note that maxTouchPoints is undefined in iOS 12 and earlier versions, warranting a different approach for those scenarios...

• iOS 12 and prior exhibit a unique quirk absent in macOS: the inability to modify the volume property of an Audio element aside from setting it to "1." This stems from Apple's restriction on volume adjustments for Audio elements in iOS devices while allowing it in macOS. Consequently, this quirk represents the final fallback method for distinguishing between iOS and macOS devices.

Assigns the value of _iOSDevice as either true or false

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

Here's a simple solution to detect iOS devices using JavaScript:

const isIOS = /^iP/.test(navigator.platform);

---

UPDATE 2019-09: For iPad in desktop mode with iPadOS 13+, use this updated code:

const isIOSiPadOS = /^iP/.test(navigator.platform) ||
           /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;

UPDATE 2024 alternative

// This code works as of 2024 without worrying about IE 11 errors:

const isIOSiPadOS = navigator.platform.startsWith("iP") ||
    navigator.platform.startsWith("Mac") && navigator.maxTouchPoints > 4;

• Both versions are safe and fast, taking into account touch events and touch points supported by different devices.
• The use of ^ in the regex makes it faster than searching through the entire UA string.
• Using navigator.platform is safer than navigator.userAgent for device detection.
• This code can even detect iPhone / iPad simulators.

If you are utilizing Modernizr, you have the ability to create a custom test for it.

Regardless of which detection method you opt for (userAgent, navigator.vendor or navigator.platform), you can always package it neatly for convenient future use.

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

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

An uncomplicated and effortlessly customizable iteration.

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

Finding iOS Devices (Versions Below 12 and 13+)

This is a community wiki post, as the edit queue is full and all other answers are currently outdated or incomplete.

const iOS_1to12 = /iPad|iPhone|iPod/.test(navigator.platform);

const iOS13_iPad = (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));

const iOS1to12quirk = function() {
  var audio = new Audio(); // temporary Audio object
  audio.volume = 0.5; // does not work on iOS <= 12
  return audio.volume === 1;
};

const isIOS = !window.MSStream && (iOS_1to12 || iOS13_iPad || iOS1to12quirk());

Did you know that iPads using iOS 13 will display navigator.platform as MacIntel? This implies that a different method must be utilized to identify iPadOS devices.

Avoid the need to check navigator.userAgent or navigator.platform:

const isIOS = typeof navigator.standalone === 'boolean';

navigator.standalone specifically relates to iOS Safari. Refer to MDN and Safari HTML Reference.

A couple of years back, I drafted this code which I still find effective:

if(navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPhone/i) || (navigator.userAgent.match(/iPod/i))) 

    {

        alert("Ipod or Iphone");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPad/i))  

    {

        alert("Ipad");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.indexOf('Safari') != -1)

    {

        alert("Safari");

    }

else if (navigator.vendor == null || navigator.vendor != null)

    {

        alert("Not Apple Based Browser");

    }

When integrating Modernizr tests, it is recommended to focus on testing for specific features rather than targeting a particular device or operating system. It can be necessary to add multiple tests for the same feature if needed. Certain functionalities may not be easily detected through feature detection alone.

    Modernizr.addTest('inpagevideo', function ()
    {
        return navigator.userAgent.match(/(iPhone|iPod)/g) ? false : true;
    });

For example, on the iPhone (excluding the iPad), inline video playback is not supported and opens in fullscreen mode instead. To address this issue, I implemented a test named 'no-inpage-video'.

This test result can then be utilized in CSS (Modernizr applies a class .no-inpagevideo to the <html> tag when the test fails)

.no-inpagevideo video.product-video 
{
     display: none;
}

By applying this CSS rule, the video will be hidden on iPhones. In my case, I am presenting an alternative image with an onclick event to play the video, avoiding the default video player and play button from being displayed.

If you're utilizing React, there's a fantastic library designed specifically for handling these types of issues: REACT-UGENT. (Developed with ua-parser-js.)

https://github.com/medipass/react-ugent

Supported browsers include:

chrome, chromium, edge, firefox, ie, lynx, safari, opera

Supported operating systems include:

android, blackberry, chromium os, debian, ios, linux, mac os, ubuntu, unix, windows

Supported devices include:

console, computer, mobile, tablet, smarttv, wearable, embedded

Simple to use as:

<Ugent browser="safari" os="ios">
  <div>
    This content will only display on Safari on iOS.
  </div>
</Ugent>

If you're not using React, you can opt for -ua-parser-js

https://github.com/faisalman/ua-parser-js

If you are still in the process of determining if the device is running on iOS or not, I suggest following this method:

1. Start by creating a folder named helper
2. Within this folder, create a file named either platform.ts or platform.js
3. Inside this file, export the function isIOS:

export const isIOS = () => {
    let platform = navigator?.userAgent || navigator?.platform || 'unknown'

    return /iPhone|iPod|iPad/.test(platform)
}

The result will return true if it detects an iPhone, iPod, or Ipad, and false otherwise.

You might be wondering why we need to check

navigator.userAgent || navigator.platform

. The reason being that while the latter used to be the default, it is now deprecated and may not be supported by some browsers in the future. The former option is more reliable.

You can find more information about the deprecation mentioned above here:

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#:~:text=Deprecated%3A%20This%20feature%20is%20no,be%20kept%20for%20compatibility%20purposes.

Examining userAgentData, userAgent, and platform logs.

Upon using the function below, I obtained the following logs:

    console.log({
        userAgentData: navigator?.userAgentData?.platform,
        userAgent: navigator?.userAgent,
        platform: navigator?.platform,
    })

    {
        "userAgentData": "",
        "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
        "platform": "MacIntel"
    }

I tested this on my MacBook across different browsers and operating systems, and it worked consistently. Thus, as observed,

navigator?.userAgentData?.platform

does not yield any meaningful results.

Despite using React to call this function, no errors related to TypeScript were encountered.

Extra: Detecting Android Devices

In case you are curious about identifying whether the platform is Android, avoiding the approach of simply negating isIOS is advised:

const isAndroid = !isIOS();

This method won't suffice because desktop devices could mistakenly be identified as running on Android. To accurately assess for Android platforms, utilize the following code snippet:

export const isAndroid = () => {
    const ua = navigator.userAgent.toLowerCase() + navigator?.platform.toLowerCase();
    const isAndroid = ua.indexOf("android") > -1;

    return isAndroid;
}

The rationale behind checking both navigator.userAgent and navigator?.platform is to ensure compatibility with both older and newer browser versions.

Utilize the Apple Pay JS API verification process

`if (window.dw && window.dw.applepay && window.ApplePaySession && window.ApplePaySession.canMakePayments()) {

// take necessary actions

}`

When it comes to iOS devices, the user-agents often contain either iPhone or iPad. My approach is to simply filter based on these specific keywords.

Since reliance on navigator.platform is no longer recommended due to its deprecation, an alternate approach can be implemented.

To identify MacOS systems, you can simply check the value of navigator.vendor. If the result displays as Apple Computer, Inc., it indicates the presence of MacOS operating system.

After much struggle, I finally came up with this solution that may not be perfect, but I hope it can assist someone in need. This code snippet specifically targets the Safari browser on iPad devices.

function detectSafariOnIpadOS() {
  var userAgent = navigator.userAgent;
  var isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
  var isIpad = /iPad/i.test(userAgent);
  var isMacintosh = /Macintosh/i.test(userAgent);
  var isTouchDevice = "ontouchend" in document;

  console.log("User Agent:", userAgent);
  console.log("detectSafariOnIpadOS result:", isSafari && (isIpad || (isMacintosh && isTouchDevice)));

return isSafari && (isIpad || (isMacintosh && isTouchDevice));
}

Are you striving to comply with the recommendations of PageSpeed Insights and Lighthouse? These tools often identify "issues" related to the use of navigator.userAgent. To address this, consider implementing the following code snippet inspired by Boostrap 5:

function getUAString() {
    let uaData = navigator.userAgentData;
    if (null !== uaData && uaData.brands) {
        return uaData.brands.map(item => item.brand + '/' + item.version).join(' ');
    }
    return navigator.userAgent;
}

const isIOS = /iP(hone|od|ad)/.test(getUAString());

Success! Managed to make it work in just one line, even for devices like the iPad. In my scenario, I'm implementing a feature where a button is hidden on any device from the Apple brand.

// This code snippet conceals the close button on iOS devices (including iPad and iPhone running iOS 13+). It also considers the "maxTouchPoints" attribute within the main menu.
if (!/(iPad|iPhone|iPod)/g.test(navigator.userAgent) && !navigator.maxTouchPoints) {
    this.createCloseButton();
}