Trouble showing different content on iOS - ios

Question

After 2 days I'm driving myself nuts because I can't resolve this. My issue is as follows:
1.) I am trying to use javascript target an iOS device (regardless of browser being Chrome on apple, Safari, Firefox on apple etc...) to show a different DOM element verses non iOS browsers.
2. ) My iOS detection code is as follows, which I've seen in several other threads: // Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
3.) After running this check I am attempting the following in both Safari and Chrome on iOS "my way which I'm assuming is incorrect because it's not working lol!" :
if(!isIos()) {
setTimeout(function() {
console.log('showing non iOS banner prompt after delay');
}, 10000);
} else if (isIos()) {
setTimeout(function() {
console.log('showing iOS banner prompt after delay');
}, 10000);
}
4.) The proper log is shown through chrome dev tools on my windows laptop when selecting an iOS device (which I know is not an actual iOS enviroment), but no matter what i do, once loaded to the live site it ALWAYS shows the non Ios log on my iPad.

Answer 1

SOLVED (for iPAD)
After finding this post enter link description here i changed my detection method. I was testing on an iPAD (as this is the only Apple product i own because I'm not a fan) and after this correction my current issue was resolved. I hope this works on other devices as well but won't know until I borrow a freind's. Hope someone else finds this helpful.
||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent ) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
}