19

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

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

4

7 回答 7

7

当您使用 { 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 高度排序此列表）。最安全的做法是对这个重叠区域使用滚动背景，以保证显示背景图像。 如果你想安全起见，请使用 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');
});

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

于 2015-02-10T06:52:28.490 回答
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，也没有其他不支持固定背景的浏览器，所以我无法测试设置“固定”。

于 2013-01-02T00:02:49.657 回答
1

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

请参阅https://codepen.io/AartdenBraber/pen/gGmdWK上的代码

于 2017-09-27T13:02:02.323 回答
0

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

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

在你的情况下是这样的：

var elem = document.createElement('div');
elem.style.backgroundAttachment = 'fixed';
var isSupported = 'fixed' === elem.style.backgroundAttachment;
于 2013-01-01T23:39:45.170 回答
0

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

可以使用 JS 来检测具有这种呈现模式的浏览器，方法是检查用户代理中的iPhone iPad iPod& Android，这可能针对正确呈现固定背景的移动浏览器，例如不断发展的移动 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%;
 }
}
于 2020-09-02T04:22:42.390 回答
-4

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

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

资源

于 2013-01-01T23:21:07.700 回答
-4

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

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

于 2013-01-01T23:14:47.940 回答