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 detec
None of the previous answers here work for all major browsers on all versions of iOS, including iOS 13. Here is a solution that works for Safari, Chrome and Firefox for all iOS versions:
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()));
})();
Note that this code snippet was written with priority on readability, not conciseness or performance.
Explanation:
If the user agent contains any of "iPod|iPhone|iPad" then clearly the device is iOS. Otherwise, continue...
Any other user agent that does not contain "Macintosh" is not an Apple device and therefore cannot be iOS. Otherwise, it is an Apple device, so continue...
If maxTouchPoints
has a value of 1
or greater then the Apple device has a touch screen and therefore must be iOS since there are no Macs with touch screens (kudos to kikiwora for mentioning maxTouchPoints
). Note that maxTouchPoints
is undefined
for iOS 12 and below, so we need a different solution for that scenario...
iOS 12 and below has a quirk that does not exist in Mac OS. The quirk is that the volume
property of an Audio
element cannot be successfully set to any value other than 1
. This is because Apple does not allow volume changes on the Audio
element for iOS devices, but does for Mac OS. That quirk can be used as the final fallback method for distinguishing an iOS device from a Mac OS device.