I am trying to create code to target ios and replace a background-attachment:fixed banner with a banner that just has the image and not background-attachment property.
The code that I have works on iphones, but not on any Ipad. I have checked my code with console log and can verify it works.
My 2nd piece of code works but it also targets android, which I do not want. Is anyone else having this problem and what are they doing about it?
First code
var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isIOS) {
console.log('This is a IOS device');
let banner1 = document.querySelector('.hank-banner')
banner1.remove()
document.querySelector('.ios-banner').style.display = "block";
} else {
console.log('This is Not a IOS device');
}
Second code
// Check if the device is an iPad based on touch capability and screen size
function isiPad() {
// Check for touch capability
var isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
// Check for screen size (iPad screen size can be used as a clue)
var isiPadScreenSize = Math.min(window.screen.width, window.screen.height) >= 600; // Minimum width in portrait mode
return isTouchDevice && isiPadScreenSize;
}
// Example usage
if (isiPad()) {
// Code to execute if the device is an iPad
console.log("This is an iPad");
let banner1 = document.querySelector('.hank-banner')
banner1.remove()
document.querySelector('.ios-banner').style.display = "block";
} else {
// Code to execute if the device is not an iPad
console.log("This is not an iPad");
}
From iOS 13 iPad started to use mac os user-agent. To detect iPad with JavaScript, I would check if there is touch screen and if it's Mac OS user agent, like this:
function isiPad() {
var isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
var isMacLike = navigator.userAgent.includes('Intel Mac OS X');
return isTouchDevice && isMacLike;
}