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