Javascript 检测对后台附件的支持：已修复？

是否有方法检测浏览器对后台附件的支持：已修复

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

---

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

fixed

在所有桌面浏览器中都受支持，IE6及更旧版本除外

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

---

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

创建一个临时元素（例如

DIV

）

将其

style

DOM属性的值（

element.style.backgroundAttachment

在您的情况下）设置为要检查的值（

fixed

）

将实际的

样式

值与指定的字符串进行比较

在您的案例中，类似这样的情况：

var elem=document.createElement（'div'）；
elem.style.backgroundAttachment='固定'；
var isSupported='fixed'==elem.style.backgroundAttachment；

您可以查看

document.body.style

并确保

• 那里有一个叫做“背景附件”的属性
• 您可以将其设置为“固定”，并在执行此操作时保留其值

Chrome、FF、Opera和Safari都会忽略将属性设置为无效值的尝试。IE9在您尝试时抛出异常。因此，如果出现任何一种情况，该值肯定不受支持。（如果浏览器只是盲目地设置值并保留它，那么它可能仍然不起作用。但在这一点上，你真的无法让浏览器告诉你很多。）

---

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

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

坏消息是： 目前还不可能直接专门测试对固定背景的支持，因为移动浏览器会错误地报告它们确实支持固定背景。要亲自查看此错误，请在移动浏览器中加载此测试：

不幸的是，有少数平板电脑品牌的屏幕宽度为1280px和1366px，它们与最小的桌面屏幕重叠（按CSS高度排序）。最安全的方法是在重叠区域使用滚动背景，以确保背景图像能够显示如果您想安全起见，请使用最大设备宽度：1366px。然而，使用这些巨型平板电脑的人数远远少于使用小屏幕笔记本电脑的人数

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

此选项使用JS测试浏览器是否支持touch events API，因此更可能位于触摸屏设备上（该设备更可能将固定背景渲染为不可见）。这是重量级选项。它需要和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');
});

---

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

我想我已经找到了适用于所有设备的解决方案。可以检测到

clip

-支持，所以我就这样做了，并在DOM中更改了支持

clip

的时间。如果不是，则返回

后台附件：修复

请参阅
@supports（后台附件：已修复）
将报告true，因为浏览器引擎已成功解释属性和值。然后，mobile webkit决定将您的背景绑定到与其应用到的元素相同的堆叠上下文（相同的渲染平面），以获得“更好的性能”。（所有z索引都有自己的堆叠层，在桌面浏览器上，固定背景有自己的堆叠层。）

可以使用JS来检测具有这种渲染模式的浏览器，方法是在用户代理中检查iPhone

iPad

iPod

&

Android

，它可以针对能够正确渲染固定背景的移动浏览器，例如不断发展的移动Firefox。但是，我在纯CSS中找到了一种更好的方法：

CSS唯一的移动Safari和Chrome解决方案：

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%;
 }
}

@支持（-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%;
 }
}

---

你引用的网站声称IE不支持

@font-face

，尽管它发明了这条规则。正如你所说，ie6和更旧版本不支持它。页面上说that@CodyGuldner当前位置他说的是，你不能真正相信学校对那样的事情所说的话。他们因拥有过时的、有时甚至是彻头彻尾的糟糕信息而臭名昭著。你必须确保自己，在这一点上，网站上说什么并不特别重要。我不知道。谢谢我不只是为桌面浏览器建立网站，我发现我的android智能手机不支持后台附件：

$('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');
});

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%;
 }
}