2

簡単な質問ですが、メディアクエリでjquery関数を停止できますか。

レイアウトを調整できるように、ウィンドウが電話のサイズになったら停止したいjQueryスライドショーがあります。

4

3 に答える 3

1

Media QueriesはCSS3概念であり、JavaScript の機能ではありません。したがって、javascript でメディア クエリを利用するということは、実装をサポートする際に、ブラウザの CSS API に値を問い合わせることを意味します。

混乱している？

window.matchMedia()あなたがJavaScriptから呼び出すものです

var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {  
    // window width is at least 500px  
}  
else {  
    // window width is less than 500px  
}

これにより、「ブラウザのサポートは何ですか?」という古典的な問題が発生します。私の意見では、これは最新のブラウザ
でより一般的に見られる機能に依存しているため、かなり低い.

希望はありますか？

Enquire.jsと呼ばれるクリーンな API 呼び出しの背後にカプセル化され、いくつかの説明と tutsjsを使用して、ブラウザから状況を問い合わせることができるプロジェクトがあります。

ソース：

http://www.sitepoint.com/javascript-media-queries/

于 2012-11-01T15:41:45.577 に答える
0

誰かが私が間違っていることを証明できるかもしれませんが、それは可能ではないと思います。

画面幅が 768px 未満の場合、メニューを再配置することで、Web サイトで同様の問題に対処しています。したがって、 document.ready() で次のようなことができます

if ($(window).width() > 767) {
  // Start jquery slideshow here
}

また、関数で幅チェックをラップすることにより、以下のようなことを行うことで、ブラウザーのサイズ変更を考慮します。

$(window).resize(function() {
            StartSlideshow();
        });

function StartSlideshow() {
    if ($(window).width() > 767) {
      // Start jquery slideshow here
    }
}

これを行う場合は、document.ready で関数を呼び出す必要もあります!

于 2012-11-01T14:32:31.350 に答える
0

css3 メディア クエリを意味する場合は、方法がわかりません。

しかし、このようなもの：

function windowSizeCheck(){
  if($(window).width() > (minSizeforSlideShow) && $(window).height() > (minHeightforSlideShow){
    doSlideShowStuff();
  }
}

...うまくいくかもしれません。読み込みイベントとサイズ変更イベントで呼び出します ( $(window).resize())

于 2012-11-01T14:34:34.957 に答える