检测对background-attachment的支持：fixed？ [英] Detect support for background-attachment: fixed?

问题描述

有没有办法检测浏览器对background-attachment的支持：fixed？

编辑：虽然此功能在桌面浏览器上得到广泛支持，

解决方案

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

坏消息：

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

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

 函数支持CSS ）{
 try {
 var style = document.body.style; 
 if（！（backgroundAttachmentin 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>此设备& broswer支持：< / b>< br>'; 
 txt + ='{background-attachment：fixed; }：'+ supportsCSS（'fixed'）+'< br>'; 
 txt + = {background-attachment：foo; }：'+ supportsCSS（'foo'）; 
 
 el.innerHTML = txt; 
  

基于原始编写的代码：@chao

---

有限的选项：

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

$ b

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

  #some_element {
 background-attachment：fixed; 
} 
 
 @media all和（max-device-width：1024px）{
 / * 
覆盖设备的属性，
屏幕宽度为1024px或更小
 * / 
 #some_element {
 background-attachment：scroll; 
} 
} 
  

不幸的是，屏幕宽度为1280像素和1366像素，与最小的桌面屏幕重叠（按CSS高度排序此列表） 。最安全的播放是为该重叠区域使用滚动背景，从而保证显示背景图像。 如果您想安全播放，请使用max-device-width：1366像素。但是，使用这些巨大平板电脑的人数远远少于小屏幕笔记本电脑的人数。

$ b 此选项使用JS来测试浏览器是否支持触摸事件API，因此比触摸屏设备（设备更可能不会将固定背景呈现为不可见）更容易。这是重量级选项。它需要 Modernizr 和jQuery：

  if（Modernizr.touch）{
 //这个浏览器声称支持touch，所以删除固定的背景
 $（'＃some_element'）css（'background-attachment' ）;不幸的是，这个选项也有一个灰色区域。有些浏览器给出假阳性，有些给出假阴性。您可以测试鼠标事件，例如：
  $（'body'）mousemove b $ b //这个设备（触摸或不是）有一个鼠标，所以恢复到固定的背景
 $（'＃some_element'）。css（'background-attachment'，'fixed'）; 
 $（'body'）。unbind（'mousemove'）; 
}）; 
  
但是，可能是鼠标已连接到不支持的触摸屏笔记本电脑固定的背景，因此代码增加了风险。
 
Is there a way to detect browser support for background-attachment: fixed?

Edit: Although this feature is widely supported on desktop browsers it is poorly supported on portable devices which I why I would like to be able to detect the feature.
解决方案
When you use { background-attachment:fixed } current mobile devices will not display the background image at all!  To ensure the image is displayed on all mobile devices, you need to test for support, and if not supported to set the background-attachment property to either 'initial' (i.e. default state) or 'scroll' (which is the default state).

 

The bad news:

It's currently impossible to directly and specifically test for support of fixed backgrounds because mobile browsers will incorrectly report that they do support it.  To see this bug for yourself, load this test in a mobile browser:

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;
based on code originally written by: @chao 



The limited options:

It is possible to indirectly test for support with multiple methods.  

Option 1:  Remove fixed background on small screens

This option uses a CSS media query to target smaller screens to overwrite the style on devices with screen widths of 1024px or smaller (devices likely to render fixed backgrounds as invisible). The advantages of this option are:  it's very lightweight and only requires a little bit of 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;
     }
}
Unfortunately, there are a small number of tablet brands with screen widths of 1280px and 1366px, which overlap with the smallest desktop screens (sort this list by CSS Height).  The safest play is to use a scrolling background for this overlap area so that the background image is guaranteed to display.  If you want to play it safe, use max-device-width: 1366px.  However, the number of people using these giant tablets is much smaller than the number of people with small screen laptops.  

Option 2:  test for touch events and mouse events

This option uses JS to test if the browser supports the touch events API, and is therefore more likely than not to be on a touch screen device (a device more likely than not to render fixed backgrounds as invisible).  This is the heavy weight option.  It requires Modernizr and jQuery:
if(Modernizr.touch) {
  // this browser claims to support touch, so remove fixed background
  $('#some_element').css('background-attachment','scroll');
}
Unfortunately, this option also has a gray area.  Some browsers give a false positive and some give a false negative.  You could test for a mouse event, such as:
$('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');
});
However, it's possible that a mouse has been attached to a touch-screen laptop that doesn't support fixed backgrounds, so that code adds risk.

                        
这篇关于检测对background-attachment的支持：fixed？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！