19

background-attachment のブラウザー サポートを検出する方法はありますか?

編集: この機能はデスクトップ ブラウザーで広くサポートされていますが、ポータブル デバイスではあまりサポートされていないため、この機能を検出できるようにしたいと考えています。

4

7 に答える 7

7

{ 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: タッチ イベントとマウス イベントをテストする

このオプションは、ブラウザがタッチ イベント API をサポートしているかどうかをテストするために JS を使用するため、タッチ スクリーン デバイス上にある可能性が高くなります (固定された背景を非表示としてレンダリングする可能性が高いデバイス) 。これは重量オプションです。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 に答える
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 に答える
-4

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

ページの少し下に、主要なブラウザ アイコンの写真があります。どのアイコンの画像もグレー表示されません。すべてのブラウザでサポートされていると書かれています

于 2013-01-01T23:14:47.940 に答える
-4

fixedIE6 以前を除くすべてのデスクトップ ブラウザでサポートされています。

ほとんどのモバイル ブラウザーでサポートされていますが、ビューポートの処理により、多少の相違が生じる場合があります。

ソース

于 2013-01-01T23:21:07.700 に答える