当它会导致错误时如何禁用“background-attachment：fixed”答案

【问题标题】：How to disable the "background-attatchment: fixed" when it will cause an error当它会导致错误时如何禁用“background-attachment：fixed”
【发布时间】：2021-06-05 03:37:29
【问题描述】：

我已经查看了有关此问题的所有堆栈溢出，并找到了各种答案，但没有一个符合我的需求。我将背景附件设置为“固定”，但大多数人都知道这个错误在 ios 设备上。有没有办法在它不起作用时将属性设置为“滚动”？如果该属性从一开始就设置为“滚动”，则图片不会调整大小并做一些时髦的事情。

我尝试了各种解决方案，包括“@supports”、使用 web-kits 和其他 stackOverflow 建议的解决方案……它们都没有奏效。我希望有一种解决方法，甚至只是让该功能在可以工作时工作，而在不能工作时被禁用。

这是我的 CSS

.sectionHeader{
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    max-width: 100%;
    height: 100vh;
    padding: 0px !important;
    margin: 0px !important;
}

这是应用到的 div 之一：

    <div id="welcome">
        <div id="jumboName" class="jumbotron jumbotron-fluid sectionHeader d-flex align-items-center" style="background-image: url('data/welcome.JPG');">
            <div class="row mx-auto my-auto align-items-center">
                <p class="display-3" style="color:WHITESMOKE; text-shadow: 0px 0px 5px black;">Name</p>
            </div>
        </div>
    </div>

同样，这样做的目标是找到一种解决方法，或者只是不让手机上的代码中断，同时仍然对计算机产生影响。这已经发生在大多数 Web 浏览器上，当它无法处理该属性时，它会将背景样式默认为“滚动”（brave、opera 和其他一些）。只是愚蠢的 ios 设备还不够聪明。

【问题讨论】：

标签： javascript html ios css iphone

【解决方案1】：

我终于找到了一个好的答案！唯一不使用此功能的浏览器（据我所知）是移动设备。因此，我们可以使用媒体查询。

@media (hover: none) {
    .sectionHeader{
        background-attachment: scroll;
    }
}

使用它，我们可以将 background-attachment 属性设置为固定，除非设备上没有启用悬停。

【讨论】：

【解决方案2】：

据我所知，没有办法检测出这样的故障。

【讨论】：