Detect if device is iOS

Question

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

User · Answer

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.

User · Answer

This sets the variable  iOSDevice to true or false   iOSDevice     navigator platform match  iPhone iPod iPad

User · Answer

Detecting iOS With iOS 13 iPad both User agent and platform strings are changed and differentiating between iPad and MacOS seems possible  so all answers below needs to take that into account now  This might be the shortest alternative that also covers iOS 13  function iOS       return        iPad Simulator        iPhone Simulator        iPod Simulator        iPad        iPhone        iPod      includes navigator platform       iPad on iOS 13 detection       navigator userAgent includes  quot Mac quot    amp  amp   quot ontouchend quot  in document     iOS will be either true or false Worse option  User agent sniffing User Agent sniffing is more dangerous and problems appear often  On iPad iOS 13  the user agent is identical with that of a MacOS 13 computer  but if you ignore iPads this might work still for a while  var iOS    window MSStream  amp  amp   iPad iPhone iPod  test navigator userAgent      fails on iPad iOS 13  The  window MSStream is to not incorrectly detect IE11  see here and here  Note  Both navigator userAgent and navigator platform can be faked by the user or a browser extension  Browser extensions to change userAgent or platform exist because websites use too heavy-handed detection and often disable some features even if the user s browser would otherwise be able to use that feature  To de-escalate this conflict with users it s recommended to detect specifically for each case the exact features that your website needs  Then when the user gets a browser with the needed feature it will already work without additional code changes  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 iOS4 - matchMedia API in iOS5 - webAudio API in iOS6 - WebSpeech 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  iOS        lt -- Use the one here above     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  amp  amp   pushState  in window history    return  iOS 4         return  iOS 3 or earlier          return  Not an iOS device

User · Answer

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

User · Answer

After iOS 13 you should detect iOS devices like this  since iPad will not be detected as iOS devices by old ways  due to new  desktop  options  enabled by default     let isIOS    iPad iPhone iPod  test navigator platform      navigator platform      MacIntel   amp  amp  navigator maxTouchPoints  gt  1    The first condition for iOS  lt  13 or iPhone or iPad with disabled Desktop mode  the second condition for iPadOS 13 in the default configuration  since it position itself like Macintosh Intel  but actually is the only Macintosh with multi-touch   Rather a hack than a real solution  but work reliably for me  P S  As being said earlier  you probably should add IE checkup  let isIOS     iPad iPhone iPod  test navigator platform      navigator platform      MacIntel   amp  amp  navigator maxTouchPoints  gt  1    amp  amp   window MSStream

User · Answer

Slightly update the first answer using a more functional approach       const isIOS            iPad Simulator          iPhone Simulator          iPod Simulator          iPad          iPhone          iPod         indexOf navigator platform      -1

User · Answer

You can also use includes   const isApple     iPhone    iPad    iPod    iPad Simulator    iPhone Simulator    iPod Simulator    includes navigator platform

User · Answer

In order to detect the iOS version  one has to destructure the user agent with a Javascript code like this    var res   navigator userAgent match    CPU  OS   d  d         if res            var strVer   res res length-1           strVer   strVer replace                    version   strVer   1

User · Answer

It s probably worth answering that iPads running iOS 13 will have navigator platform set to MacIntel  which means you ll need to find another way to detect iPadOS devices

User · Answer

UPDATE  My original answer doesn t cover iPad in desktop mode  the default changes to desktop mode in upcoming iPadOS  13 and higher   That s fine for my usecases  if it s not for you  use this update     iPhone and iPad including iPadOS 13  regardless of desktop mode settings  iOSiPadOS     iP  test navigator platform                  Mac  test navigator platform   amp  amp  navigator maxTouchPoints  gt  4    This should be safe as long as  desktop Macs don t support touch events at all or not more than 4 touch points  current iOS devices support 5 touch points    It s fast because the regexp   first checks the starting position of the platform string and stops if there is no  quot iP quot   faster than searching the long UA string until the end anyway  It s safer than navigator userAgent check as navigator platform is much less likely faked Detects iPhone   iPad Simulator  ORIGINAL ANSWER  Wow  a lot of longish tricky code here  Keep it simple  please  This one is IMHO fast  save  and working well   iOS     iP  test navigator platform         or  if you prefer it verbose   iOS      iPhone iPad iPod   test navigator platform

User · Answer

In my case the user agent was not good enought since in the Ipad the user agent was the same as in Mac OS  therefore I had to do a nasty trick   var mql   window matchMedia   orientation  landscape             If we are in landscape but the height is bigger than width     if mql matches  amp  amp  window screen height  gt  window screen width           IOS   else          Mac OS

User · Answer

Wherever possible when adding Modernizr tests you should add a test for a feature  rather than a device or operating system  There s nothing wrong with adding ten tests all testing for iPhone if that s what it takes  Some things just can t be feature detected       Modernizr addTest  inpagevideo   function                  return navigator userAgent match   iPhone iPod  g    false   true            For instance on the iPhone  not the iPad  video cannot be played inline on a webpage  it opens up full screen  So I created a test  no-inpage-video   You can then use this in css  Modernizr adds a class  no-inpagevideo to the  lt html gt  tag if the test fails    no-inpagevideo video product-video         display  none      This will hide the video on iPhone  what I m actually doing in this case is showing an alternative image with an onclick to play the video - I just don t want the default video player and play button to show

User · Answer

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

User · Answer

A simplified  easy to extend version   var iOS     iPad    iPhone    iPod   indexOf navigator platform   gt   0

User · Answer

I wrote this a couple years ago but i believe it still works   if navigator vendor    null  amp  amp  navigator vendor match  Apple Computer  Inc     amp  amp  navigator userAgent match  iPhone i      navigator userAgent match  iPod i                     alert  Ipod or Iphone            else if  navigator vendor    null  amp  amp  navigator vendor match  Apple Computer  Inc     amp  amp  navigator userAgent match  iPad i                     alert  Ipad            else if  navigator vendor    null  amp  amp  navigator vendor match  Apple Computer  Inc     amp  amp  navigator userAgent indexOf  Safari      -1                  alert  Safari            else if  navigator vendor    null    navigator vendor    null                  alert  Not Apple Based Browser

User · Answer

var isiOSSafari    navigator userAgent match  like Mac OS X i     true  false

User · Answer

Detecting iOS  both  lt 12  and 13   Community wiki  as edit queue says it 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   amp  amp  navigator maxTouchPoints  gt  1     const iOS1to12quirk   function       var audio   new Audio       temporary Audio object   audio volume   0 5     has no effect on iOS  lt   12   return audio volume     1      const isIOS    window MSStream  amp  amp   iOS 1to12    iOS13 iPad    iOS1to12quirk

[javascript] Detect if device is iOS

Examples related to javascript

Examples related to ios

Examples related to browser

Examples related to browser-feature-detection