检测是否支持背景附着：fixed？

Question

有没有一种方法能够检测浏览器是否支持 background-attachment: fixed？

编辑：尽管桌面浏览器广泛支持此功能，但在便携设备上支持性较差，因此我希望能够检测到此功能。

- Malcr001

---

下面的答案为您提供了一些复杂性的详细信息，但以下帖子提供了一种CSS/HTML替代策略来实现相同的结果：https://dev59.com/PGkw5IYBdhLWcg3wmruH - ctrlplusb

Answer 1

当你使用 { background-attachment:fixed } 时，当前的移动设备将不会显示背景图片！为了确保在所有移动设备上都显示该图像，您需要测试其支持情况，并且如果不支持，则将background-attachment属性设置为“initial”（即默认状态）或“scroll”（这是默认状态）。

 

坏消息：

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

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高度此列表排序）。最安全的做法是在这个重叠区域使用滚动背景，以确保背景图片能够显示。如果你想玩得更加安全，请使用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');
});

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

- mattthew

---

很遗憾，您不能高效地检测到触摸（也不应该这样做），而Modernizr已经在v3中停止了支持。http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ - Alex

Answer 2

你可以查看document.body.style，确保：

• 有一个名为"backgroundAttachment"的属性，
• 你可以将其设置为"fixed"，并且在这样做时它会保留其值。

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，也没有其他不支持固定背景的浏览器可用，因此我无法测试设置“fixed”。

- cHao

---

嗯...等一下。我其实没有测试这段代码，只是设置了属性。现在正在测试。 - cHao

我也在大多数浏览器中进行了测试，但仍然得到了false。这个测试页面有什么问题？链接 - Malcr001

编辑：我添加了$(document).ready(function ..现在它返回true，但我的安卓智能手机仍然报告为true，但它并没有尝试保持背景固定。 - Malcr001

如果它返回true，即使没有支持，那么浏览器就不能信任它告诉你它支持什么。在这种情况下，除了检查navigator.appName和/或navigator.appVersion的值是否在列表中之外，我不知道是否还有其他方法。 :P - cHao

浏览器嗅探并不是解决这个问题的最佳方法，我只能给我的移动站点添加一个可以扩展/重复到底部的背景。很遗憾，我不能为那些真正支持固定背景的手机添加固定背景。无论如何，谢谢你，你帮了我大忙。 - Malcr001

Answer 3

我认为我已经找到了适用于所有设备的解决方案。可以检测到clip支持，因此我做了这个，并在clip受支持时更改了DOM。如果不支持，则会回退到background-attachment:fixed; 请参见代码：https://codepen.io/AartdenBraber/pen/gGmdWK

- Aart den Braber

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;

- Marat Tanalin

---

不错的想法，但在移动设备上给我提供了很多错误的结果。 - Malcr001

如果示例中的 isSupported 为 true，但是该功能本身不能按预期工作，则这不是一个错误的阳性结果：该功能得到支持，但其实现只是有一些特定的细节。 - Marat Tanalin

我同意你的看法，这应该很简单，但事实并非如此... :/ 我真的不明白为什么浏览器会给出错误的结果，而不是承认它们无法完成。然后我们就可以绕过它了。 - Aart den Braber

请查看 http://codepen.io/AartdenBraber/pen/PprBpB 以获取误报的信息... - Aart den Braber

@AartdenBraber，您应该更具体：哪个确切的浏览器和版本会给您提供错误报告？ - Marat Tanalin

Answer 5

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

可以使用JS检测具有此渲染模式的浏览器，方法是检查用户代理中的iPhone iPad iPod和Android，这可能会针对正确呈现固定背景的移动浏览器，例如不断发展的移动Firefox。但是，我在纯CSS中找到了更好的方法：

仅适用于Mobile 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%;
 }
}

- Aaron Gillion

Answer 6

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

页面下方有主要浏览器图标的图片。所有图标都没有变灰。页面显示该功能在所有浏览器中都支持。

- Cody Guldner

---

你在引用一篇声称IE不支持@font-face的网站，尽管IE是该规则的发明者。 - Niet the Dark Absol

它不支持IE6及更早版本，就像你所说的那样。页面上写着。 - Cody Guldner

@CodyGuldner：他的意思是，你不能真正相信w3schools关于这类事情的说法。他们因为提供过时甚至明显错误的信息而臭名昭著。你必须自己确认，到那时，网站上说什么就不是特别重要了。 - cHao

Answer 7

fixed 在所有桌面浏览器中都得到支持，除了 IE6 及更早版本。

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

来源

- Niet the Dark Absol

---

我不仅为桌面浏览器构建网站，而且我发现我的Android智能手机不支持background-attachment: fixed，因此我希望能够检测该功能。 - Malcr001

我不会说“大多数移动浏览器”，请看这里：http://www.quirksmode.org/css/backgrounds-borders/mobile.html - Martin Schuhfuß