2

私のウェブサイトがデスクトップサイズのディスプレイ上にある場合、モバイルサイズのディスプレイにはロードされない追加のjQueryスクリプトをロードしたいと思います。

CSSにはメディアクエリがあり、ブラウザのサイズに応じてCSSファイルを簡単に読み込むことができます。Jqueryにこれに相当するものはありますか？

背景調査：

これが私が見つけたいくつかの解決策とそれぞれの欠点です。

解決策1： Enquire.js-これはJavascriptと同等のメディアクエリであると思われます（私は思います）。ただし、ドキュメントはあまり明確ではありません（少なくとも初心者にとっては）。

たとえば、このチュートリアルでは次の例を示します。

enquire.register("max-width: 960px", function() {
  // put your code here
});

ただし、Jqueryコードをコピーして貼り付けると、何も起こりません。Jqueryファイルへのリンクを配置する必要があるかもしれませんが、ドキュメントにはその方法が説明されていません。

解決策2： ウィンドウのサイズ変更を使用する-を使用$(window).resizeしてスクリプトをトリガーできます。ただし、ユーザーがブラウザのサイズを変更した場合にのみ機能します。これは、ウィンドウが常に最大化されているデスクトップユーザーには適していません。

さらに問題は、ブラウザのサイズが変更されるたびにスクリプトが読み込まれることです。これは、一部のスクリプトでは問題になる可能性があります（ウィンドウのサイズが数回変更された場合に、false / trueという単語が際限なく繰り返される例を参照してください）。

解決策3： 非表示の100％幅のDIVを設定してから、その幅をチェックするスクリプトを実行します-これの欠点は、ページが最初に読み込まれたときにのみ実行されるため、ウィンドウのサイズを変更するユーザーには適していません（またはデバイスの向き）。 タイマーを実行して1秒ごとに幅をチェックすることもできますが、それはあまり効率的ではないようです。

誰かがうまくいく解決策を知っていますか？

ありがとう。

PS。この質問は、Jqueryに相当するメディアクエリに関するものです。これは、JavascriptでCSSメディアクエリを再作成しようとすることではありません（つまり、css3-mediaqueries-jsで実現されるさまざまなウィンドウサイズのさまざまなCSSファイルをロードするためにJqueryを使用することではありません）。

4

1 に答える 1

0

jQuery 専用ではありませんが、私は Paul Irish の Modernizr ライブラリで高いレベルの成功を収めてきました。簡単な方法で、CSS と同じ構文を使用してメディア クエリをテストできます。テストは true または false を返します。例えば：

if (Modernizr.mq('only screen and (max-width: 768px)') == true) {
  // your code here
}

ブラウザーがそのルールの CSS を受け入れる場合、関数は true も返します。詳細については、Modernizr ドキュメントを参照してください。

それが役立つことを願っています。

于 2012-10-07T18:59:03.383 に答える