0

私はこのコードを持っています:

<script type="text/javascript">
        var snapper = new Snap({
            element: document.getElementById('content'),
            disable: 'right'

        });
</script>

そして、ウィンドウの幅が768px以下の場合にのみ実行/オンにしたい. javascriptでこれを行うにはどうすればよいですか？

ありがとう

4

4 に答える 4

1

window.onresizeイベントをご利用ください。

window.onresize = function ()
    {
        if (window.innerWidth <= 768)
        {
            var snapper = new Snap({
                element: document.getElementById('content'),
                disable: 'right'

            });
        }

    }

これは、ウィンドウのサイズ変更が完了したときにのみ発生することに注意し$(window).width()てください。また、上記の if ステートメントで行ったことを元に戻したい場合はelse、適切なコードでブロックをアタッチする必要があります。最後に、最適化が思い浮かび、不要なコードの実行を避けたい場合 (たとえば、ウィンドウのサイズが 768 に変更され、続いて 700 に変更された場合、両方のブロックを実行する理由はありません)およびifによってチェックされるフラグを設定することができます。 ブロック (ブロックは に変わります) を使用して、必要のないときに新しいブロックを作成しないようにします。ifelse ifelseelse ifSnap

于 2013-07-01T16:56:35.957 に答える
0

このコードを実行するかどうかを判断するには、modernizr のメディア クエリ機能を使用することを検討してください。

CSS と同じようにメディア クエリを実行できます。それが true の場合は、コードを実行します。

if(Modernizr.mq('(max-width: 767px)'){
    //your code
}
于 2013-07-01T16:53:31.640 に答える
0

jqueryを使用すると、ウィンドウの幅と高さを取得できるはずです

$(window).width();
$(window).height();

あなたが求めていることをするために（すでにjqueryを使用している場合）

$(window).resize(function() {
   if ($(window).width() <= 768) {
       //do your code
   }
   else {
       //go back to normal
  }
});
于 2013-07-01T16:53:40.103 に答える
0

プロパティを使用してwindow.innerWidth、ビューポートの幅を決定します。これには垂直スクロールバーが含まれることに注意してください。

if(window.innerWidth <= 768) {
    // your code
}

ソース: https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth

このinnerWidthプロパティは、IE9 より前のバージョンの IE では使用できないことに注意してください。Safari 3 より前の Safari。および Opera 9 より前の Opera。

于 2013-07-01T16:52:11.470 に答える