javascriptiosipaduser-agentbackground-attachment

iOS targeting javascript does not work on Ipad, only iphone


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");
}

Solution

  • 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;
    }