Change Color for iPhone visitor-CodePudding

How can i change the color of an element, depending if the visitor is using ios (iPhone)?

This is what i tried:

<p id="TestID">Change this color for iPhone</p>

document.onload = function myFunc(){

if( (navigator.platform.indexOf("iPhone") != -1)) 

     document.getElementById("TestID").style.color = "red !important";);}

But it did not work.

Any suggestions?

Much appreciated

CodePudding user response：

here how i check for users' device. maybe this works for you too.

const userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
    // android users
} else if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent)) {
    // ios users
}

for your case, try:

window.onload = () => {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent)) {
        document.querySelector("#TestID").style.color = "red";
    }
}

also you used document.onload incorrectly. more on that