0

タブレットとモバイルで無効にしたい次のスニペットがあります。

if ( !! $('#sidebar').offset()) {    
        var stickyTop = $('#sidebar').offset().top;            
        $(window).scroll(function() {    
            var windowTop = $(window).scrollTop();    
            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });    
            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }

そして、私は次のように、メディアクエリか何かの中にラップすることを考えていました:

if(@media (min-width:500px)){
if ( !! $('#sidebar').offset()) {

        var stickyTop = $('#sidebar').offset().top;


        $(window).scroll(function() {

            var windowTop = $(window).scrollTop();

            if (stickyTop < windowTop) {
                $('#sidebar').css({ position: 'fixed', top: "120px" ,  right: "5%" });

            }
            else {
                $('#sidebar').css('position', 'static');
            }

        });

    }
}

しかし、これは機能しないと確信しています。このコードがモバイルで機能しないようにするにはどうすればよいですか?

4

6 に答える 6

2

margin:1px最善の解決策は、メディアごとにいくつかの要素のスタイルを変えて（たとえそうであっても）、計算されたスタイルを検出することです。このようにして、任意のCSSメディアルールを同じように簡単に使用でき、完全な互換性が得られます。CSS：

#widget{display:none}

@media screen{
  #widget{display:block}
}

JS：

if($("#widget").css("display")!="none){
   ...
}

ワイドタブレット（キーボードを持っている人もいます）のユーザーはサイドバーを使用したい場合があるため、メディアではなくブラウザ機能をクエリする必要があることに注意してください。if(document.width>600){...

于 2012-10-19T08:08:42.503 に答える
1

次のようなmatchMedia()関数を使用できます。

if ( window.matchMedia('(min-width:500px)') ) {
  // your code
}

ただし、この機能はすべてのブラウザでサポートされているわけではないため、注意してください。

編集

ポールアイリッシュによるポリフィルはここにあります。

于 2012-10-19T08:06:45.827 に答える
0 
if( $(window).width() > 499 ) {
   // Code here
}
于 2012-10-19T08:06:54.143 に答える
0

これが最善の方法であるかどうかはわかりませんが、次のとおりです。

<style type="text/css" media="screen">
body:after 
{
    content:url("javascript:(function(){document.getElementsByTagName('p')[0].innerHTML=' ';})()");
}
</style>

つまり、疑似要素を使用して、タグの後に特定の JavaScript を追加しますbody。

別の方法は、異なるスタイルをbodyタグに割り当てたりhidden field、異なるメディアに特別なものを割り当てたりしてから、jQuery または通常の JavaScript からこのスタイルを検出することです。

ウィンドウの幅をチェックすることは、推奨される方法ではありません! 通常のスクリーン デバイスとハンドヘルドの境界は徐々に薄れつつあります。

于 2012-10-19T08:10:52.953 に答える
0

ウィンドウ幅の検出はせいぜい少し不安定です。タブレットはモバイル デバイスであり、多くの場合、500 ピクセルを超える大きな画面を備えています。userAgent スニッフィング、またはdetectmobilebrowsers.com/のスクリプトを試すことをお勧めします。もう 1 つのオプションは、modernizrを使用してタッチ対応デバイスを確認することです。

于 2012-10-19T08:11:49.303 に答える
0

@Sirko が非常によく指摘しているように matchMedia を使用できます。古いブラウザとの互換性を保つために、このmatchMediaポリフィルを次のように使用できます。

if (matchMedia('(min-width:500px)').matches) {
    // do your stuff
}
于 2012-10-19T08:15:57.477 に答える