Is there a way to detect iPadOS/iPad device in a website that I am developing?

Question

What I want to know: is there a way to detect a particular device (iPad) using either HTML, CSS or JS? I want to be able to disable some code if the site is bought up on an iPad. As of yet I don't know what code I want to disable because I don't yet know what is causing the problem but I am researching through trial and error to see if I can get the site to work on the iPad with certain changes.

The Issue: I designed a website that has an overlay that has polygons moving across it using CSS. The site uses HTML5, Bootstrap 4, Parallax (I know it does not work on iPad without work arounds and it is not the problem) and JS. The problem is that when the site loads on an iPad it flickers, I thought it was the CSS that makes up the animations on the index page, but no matter which page I bring up it still flickers. I am at a lost as to what the cause is. The web address is www.ace-of-he-arts.com . If you have seen this before any help would be appreciated.

Answer 1

You can check for IOS or any other device like android by navigator.platform . You can read more here -

https://www.w3schools.com/jsref/prop_nav_platform.asp

Currently (2019) difference between iPadPro and the other platforms is that iPadPro is touch enabled.So you can use it for clarification.

Here are a couple of helpful methods you can use.

function isIOS() {
  var pl=navigator.platform.toString().toLowerCase();
  if (pl.includes("IPad") || pl.includes("IPhone") || pl.includes("IPod")){
    return true;
  } else {
    return navigator.maxTouchPoints &&
      navigator.maxTouchPoints > 2 &&
      /MacIntel/.test(navigator.platform);
  }
}

function isIpadOS() {
  return navigator.maxTouchPoints &&
    navigator.maxTouchPoints > 2 &&
    /MacIntel/.test(navigator.platform);