检测对背景附件的支持：已修复？

Question

有没有办法检测浏览器对背景附件的支持：已修复？

编辑：虽然此功能在桌面浏览器上得到广泛支持，但在便携式设备上的支持却很差，这正是我希望能够检测到该功能的原因。

Answer 1

当您使用 { background-attachment:fixed } 时，当前移动设备根本不会显示背景图片！为确保图像显示在所有移动设备上，您需要测试是否支持，如果不支持，请将 background-attachment 属性设置为“初始”（即默认状态）或“滚动”（默认状态） .

 

坏消息：

目前无法直接具体地测试对固定背景的支持，因为移动浏览器会错误地报告他们确实支持它。要亲自查看此错误，请在移动浏览器中加载此测试：

http://codepen.io/mattthew/pen/PwEqJa

function supportsCSS(value) {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === value);
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

var el = document.getElementById('result');
var txt = '<b>This device &amp; broswer supports:</b><br>';
txt += '{ background-attachment:fixed; } : ' + supportsCSS('fixed') + '<br>';
txt +=  { background-attachment:foo; } : ' + supportsCSS('foo');

el.innerHTML = txt;

基于最初由@chao 编写的代码

---

有限的选项：

可以使用多种方法间接测试支持。

选项 1：移除小屏幕上的固定背景

此选项使用 CSS 媒体查询来定位较小的屏幕，以覆盖屏幕宽度为 1024 像素或更小的设备上的样式（设备可能会将固定背景呈现为不可见）。这个选项的优点是：它非常轻量级并且只需要一点点 CSS：

#some_element {
     background-attachment: fixed;
}

@media all and (max-device-width: 1024px) {
     /* 
     overwrite property for devices with 
     screen width of 1024px or smaller  
     */
     #some_element {
          background-attachment: scroll;
     }
}

不幸的是，屏幕宽度为 1280px 和 1366px 的平板电脑品牌很少，与最小的桌面屏幕重叠（按 CSS 高度排序this list）。最安全的做法是对这个重叠区域使用滚动背景，以保证显示背景图像。 如果您想安全起见，请使用 max-device-width: 1366px。 但是，使用这些巨型平板电脑的人数远远少于使用小屏幕笔记本电脑的人数。

选项 2：测试触摸事件和鼠标事件

此选项使用 JS 来测试浏览器是否支持触摸事件 API，因此 更有可能在触摸屏设备上（设备更可能呈现固定背景作为隐形）。这是重量级选项。它需要Modernizr 和 jQuery：

if(Modernizr.touch) {
  // this browser claims to support touch, so remove fixed background
  $('#some_element').css('background-attachment','scroll');
}

很遗憾，此选项也有灰色区域。一些浏览器给出误报，一些浏览器给出误报。您可以测试鼠标事件，例如：

$('body').mousemove(function(event){
  // this device (touch or not) has a mouse, so revert to fixed background
  $('#some_element').css('background-attachment','fixed');
  $('body').unbind('mousemove');
});

但是，鼠标可能已连接到不支持固定背景的触摸屏笔记本电脑上，因此代码会增加风险。

Answer 2

您可以查看document.body.style 并确保

• 那里有一个名为“backgroundAttachment”的属性，并且
• 您可以将其设置为“固定”，当您这样做时它会保留其值。

Chrome、FF、Opera 和 Safari 都会忽略将属性设置为无效值的尝试。当您尝试时，IE9 会引发异常。因此，如果发生任何一种情况，则绝对不支持该值。 （如果浏览器只是一味地设置值并保留它，那么它可能仍然不起作用。但到那时，你真的不能让浏览器告诉你太多。）

function supportsFixedBackground() {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === "fixed");
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

我不再使用 IE6，也没有其他不支持固定背景的浏览器，所以我无法测试设置“固定”。

Answer 3

我想我已经为所有设备找到了解决方案。可以检测到clip-support，所以我就是这样做的，并在支持clip 时对DOM 进行了更改。如果不是，则返回background-attachment: fixed;

查看代码 https://codepen.io/AartdenBraber/pen/gGmdWK

Answer 4

可以通过以下步骤检测对任何 CSS 属性值的支持：

1. 创建一个临时元素（例如DIV）；
2. 将其style DOM 属性的值（在您的情况下为element.style.backgroundAttachment）设置为要检查的值（在您的情况下为fixed）；
3. 将实际style 值与指定字符串进行比较。

在你的情况下是这样的：

var elem = document.createElement('div');
elem.style.backgroundAttachment = 'fixed';
var isSupported = 'fixed' === elem.style.backgroundAttachment;

Answer 5

@supports (background-attachment: fixed) 将报告 true，因为浏览器引擎成功解释了属性和值。然后，移动 webkit 决定将您的背景绑定到与应用它的元素相同的堆叠上下文（相同的渲染平面），以获得“更好的性能”。 （所有 z-index 都有自己的堆叠层，在桌面浏览器上，固定背景有自己的层。）

可以通过在用户代理中检查iPhoneiPadiPod和Android来使用JS来检测具有这种渲染模式的浏览器，这可能针对正确渲染固定背景的移动浏览器，例如移动不断发展的火狐。但是，我在纯 CSS 中找到了更好的方法：

适用于移动 Safari 和 Chrome 的纯 CSS 解决方案：

@supports (-webkit-overflow-scrolling: touch) 针对所有拒绝将背景绑定到视口的相同版本的移动 webkit。

因此，考虑到这一点，您可以默认修复您的背景，然后附加此 @supports 规则以应用一种移动填充：

示例：

body {
 background-image: url('bg.png');
 background-size: cover; background-attachment: fixed;
}

@supports (-webkit-overflow-scrolling: touch) {

 /* Detach problematic background */
 body { background: none !important; }

 /* Insert empty div at bottom of page */
 #lonelyDiv {
  position: fixed; top: 0px; left: 0px; z-index: -1;
  width: 100%; height: 100%;

  /* Using same background with size=cover may be possible in some situations */
  background-image: url('bg.png'); background-size: cover;

  /* Other designs may require a stretchable background...
   or cropped versions for mobile aspect ratios applied after @media (orientation) rules */
  background-image: url('mobile-bg.png'); background-size: 100%;
 }
}

Answer 6

http://www.w3schools.com/cssref/pr_background-attachment.asp

页面下方有一些主要浏览器图标的图片。任何图标的图像都不会变灰。它说它在所有浏览器中都受支持

Answer 7

所有桌面浏览器都支持fixed，IE6 和更早版本除外。

大多数移动浏览器都支持它，但由于视口处理，您可能会看到一些差异。

Source