Question

有没有办法检测浏览器对后台附件的支持：修复？

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

Answer 1

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

坏消息：

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

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媒体查询来定位较小的屏幕，以覆盖屏幕宽度为1024px或更小的设备上的样式（可能将固定背景渲染为不可见的设备）。这个选项的优点是：它非常轻巧，只需要一点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;
     }
}

不幸的是，有少量平板电脑品牌的屏幕宽度为1280像素和1366像素，与最小的桌面屏幕重叠（按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 - 支持，所以我就这样做了，并且在支持clip时对DOM进行了更改。如果不是，则会回到background-attachment: fixed;

请参阅 https://codepen.io/AartdenBraber/pen/gGmdWK

中的代码

Answer 4

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

创建一个临时元素（例如DIV）;
将其style DOM属性（在您的案例中为element.style.backgroundAttachment）的值设置为值以进行检查（在您的案例中为fixed）;
将实际style值与指定字符串进行比较。

在你的情况下是这样的：

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

Answer 5

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

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

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

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

请记住，默认情况下，您可以修复背景，然后附加此@supports规则以应用某种移动polyfill：

示例：

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

所有桌面浏览器均支持

fixed，IE6及更早版本除外。

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

Source

Answer 7

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

页面上有一些主要浏览器图标的图片。任何图标的图像都不会显示为灰色。它表示它在所有浏览器中都受支持

检测后台附件支持：修复？

7 个答案:

坏消息：

有限的选项：