0

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.

1 Answers1

0

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