在手机和平板电脑上禁用我的固定背景图像答案

【问题标题】：Disabling my fixed background image on mobile and tablets在手机和平板电脑上禁用我的固定背景图像
【发布时间】：2020-02-27 17:30:51
【问题描述】：

我在我的网站上使用了固定背景，它在桌面上看起来很棒。不幸的是，它没有在我的手机和平板电脑上正确显示，所以我使用以下代码禁用它：

@media only screen and (max-width: 1280px) {
body {
    background-image: none !important;
}
}

但是，我现在遇到的问题是处理更大的平板电脑。我认识的一个朋友有一个大于 1280 像素的平板电脑，但我不想在我的媒体查询中超过那个最大宽度，因为这样我的固定背景也不会在桌面上看到。有没有办法专门针对手机/平板电脑进行媒体查询和禁用此类元素，而不是屏幕尺寸，所以这不是问题吗？

【问题讨论】：

【解决方案1】：

我多次遇到这个问题，我发现唯一可行的 CSS 解决方案是使用指针 CSS 媒体查询。

指针 CSS 媒体功能测试用户是否有指针设备（如鼠标），如果有，主要指针设备的准确度。

以下代码将针对触摸设备：

// Remove background-attachment fixed on touch devices
@media (pointer: coarse) {
  background-attachment: initial;
}

【讨论】：