2

Android用のWebアプリを開発しています。ある場所で、div をスクロールする必要があるため、 overflow-y:autoがブラウザーでサポートされているかどうかを確認する必要があります。
しかし、これのテストはAndroid < 3で true を返し、サポートされていることを示していますが、使用すると期待どおりに動作しません。

overflow-y:auto

スクロールしません。

このプロパティがブラウザでサポートされているかどうかを確認する信頼できる方法はありますか? このテストは modernizr を使用して作成しましたが、常に true を返します。これはサポートされていることを意味します。

Modernizr.addTest('overflowauto', function(){
var bool = false;
var testProp = "overflow-y";
var testVal = "auto";
var styles = Modernizr._prefixes.join(testProp + ":" + testVal + "; ");
var ret = true;
ret =  Modernizr.testStyles('#modernizr { '+styles+' }', function(elem, rule){
    for(var i = 0; i < Modernizr._prefixes.length; i++) {
        bool = (window.getComputedStyle ?
                getComputedStyle(elem, null) :
                elem.currentStyle)[Modernizr._prefixes[i] + testProp] == testVal;

        if(bool) break;
    }

    return bool;

});
return ret;

});

しかし、私がそれを使用すると明らかに機能しません。物件が安全に使用できるかどうかを確認する信頼できる方法を教えてください。または、それについて何ができるでしょうか。

4

1 に答える 1

2

これを試すことができます：

Modernizr.addTest("overflowscrolling",function(){
    return Modernizr.testAllProps("overflowScrolling");
});

次に、Modernizr がDOMの要素に挿入するoverflowscrollingorクラスを確認します。これは、iOS および Android デバイスで正しく動作するようです。(または、値を直接確認してください。)no-overflowscrollinghtmlModernizr.overflowscrolling

overflowscrolling特定のブラウザー/デバイス (最近の iPhone など) に固有であるため、同様にチェックしますModernizr.touch。タッチ デバイスでない場合は、オーバーフロー スクロールを処理できると思います。Android はタッチ デバイスであるため、テストは行われModernizr.overflowscrollingますが、たとえばラップトップで Chrome をテストする必要はありません (これは false を返しますが、問題なく処理できoverflow:autoます)。

そのため、このテストは不完全かもしれませんが、私がテストしたすべてのユース ケース (すべての最新のデスクトップ ブラウザー、最近の iPhone、および Android 2.X デバイス) に対して正しいことをしているようです。サポートするデバイス/ブラウザが多数ある場合は、それらをテストし、必要に応じて微調整する必要があります。

于 2012-05-08T05:55:44.970 に答える