Blog

JavaScript to Determine If on Apple Device (works on IE 10 and above)
Posted on July 23, 2020 in Apple, JavaScript by Matt Jennings 

(function() {
   // Detect if Apple device - see:
   // https://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today

   // Polyfill for array.includes() since that doesn't exist in IE11 - see:
   // http://www.sharmaprakash.com.np/javascript/ie-alternative-to-inludes/
   var deviceDetect = navigator.platform;
   var appleDevicesArr = ['MacIntel', 'MacPPC', 'Mac68K', 'Macintosh', 'iPhone', 'iPod', 'iPad', 'iPhone Simulator', 'iPod Simulator', 'iPad Simulator', 'Pike v7.6 release 92', 'Pike v7.8 release 517'];
   var htmlTag = document.querySelector('html');
   function includes(container, value) {
     var returnValue = false;
     var pos = container.indexOf(value);
     if (pos >= 0) {
       returnValue = true;
     }
     return returnValue;
   }
   // If on Apple devices or
   // if on Windows machine and query script equals os=mac
   // Add classes to HTML tag (<html class="apple-device...">...</html>)
   // then in WordPress admin add CSS to target Apple devices
   if(includes(appleDevicesArr, deviceDetect)) {
     htmlTag.classList.add('apple-device');
   }
   // Else if on non-Apple device (i.e. Windows, Android, or Linux)
   // display Windows computer banner image
   else {
     htmlTag.classList.add('non-apple-device');
   }
 })();

Leave a Reply