CSS iOS 特定设备的样式 - 不工作

Question

Hi I am having a major issue with the load of my website on iPhone devices, both safari and google chrome browsers. I am trying to hide the element causing the issue but my Javascript or CSS code does not seem to be doing anything.

This is my Javascript code to detect the iPhone

<script>
    if(navigator.userAgent.match(/iPhone/)) {
    $('html').addClass('iphone');
}
</script>

and my CSS Class is just.iphone.banner-one {display: none;}

Could anyone help me with what I am doing wrong or a better way to fix it? I do NOT want size specific CSS codes as I would like the element to still show up on android/windows devices.

Answer 1

Maybe try:

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.getElementsByClassName("banner-one")[0].style.display = "none";
    }
</script>

or

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.getElementsByClassName("banner-one")[0].remove();
    }
</script>

or

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.querySelector("body > div:nth-child(2) > section:nth-child(1) > img:nth-child(9)").style.display = "none";
    }
</script>

or

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.querySelector("body > div:nth-child(2) > section:nth-child(1) > img:nth-child(9)").remove();
    }
</script>