适用于 iOS 特定设备的 CSS 样式 - 不起作用答案

【问题标题】：CSS Styling for iOS Specific Device - not working适用于 iOS 特定设备的 CSS 样式 - 不起作用
【发布时间】：2020-08-24 16:42:56
【问题描述】：

您好，我的网站在 iPhone 设备（包括 safari 和 google chrome 浏览器）上的负载存在重大问题。我试图隐藏导致问题的元素，但我的 Javascript 或 CSS 代码似乎没有做任何事情。

这是我检测 iPhone 的 Javascript 代码

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

我的 CSS 类只是 .iphone .banner-one {display: none;}

任何人都可以帮助我解决我做错了什么或更好的方法来解决它吗？我不希望特定尺寸的 CSS 代码，因为我希望元素仍显示在 android/windows 设备上。

【问题讨论】：

标签： javascript html css ios mobile

【解决方案1】：

不妨试试：

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

或

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

或

<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>

或

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

【讨论】：

感谢您的建议！还是不行
@YankinDeez 因此，如果用户使用 iPhone，您要做的是隐藏类名为“banner-one”的元素，对吗？如果这个元素引起了问题，那么删除它可能会更好，你不觉得吗？你能给我包含这个元素的 HTML 文件，以便我可以帮助你吗？
是的，完全删除它是一种选择，但它是一个重要的设计元素，所以我不想这样做，除非它是唯一的选择。我怎样才能将文件发送给您？
banner-one 代码就是这个
@YankinDeez 我需要至少从该元素的根目录开始的完整 html 代码才能确定获取该元素的路径，您可以尝试将其发布到 textuploader.com 然后在这里发送网址