2

わかりましたので、レガシ ブラウザーのメディアクエリのポリフィルとしてRespond.jsを使用します (ie8 が最も重要です)。

同時に、メディアクエリの一致に基づいて js コードを実行できるようにするEnquire.jsの使用を調査しています。

単独でテストされたこのようなものは動作します：

  • Respond.js は、CSS で定義されたメディアクエリを IE8 で正しく実行します
  • enquire.js は、css に一致するメディアクエリに基づいて JavaScript コードを正しく実行します。(非レガシー ブラウザの場合)

しかし、コンビは機能していないようです。すなわち:

Enquire.js は、respond.js によって有効になるメディアクエリに基づいて JavaScript を実行しません (レガシー ブラウザの場合)。

Respond.js には、MatchMedia 用のポール アイリッシュのポリフィルが含まれているため( Enquire のドキュメントに従って)、従来のサポートには十分なはずですが、何が問題なのかわかりません。

念のため確認しておきますが、この組み合わせは正しく動作するはずですか?

4

3 に答える 3

5

私は enquire の著者なので、できる限りお手伝いします。

Respond.js ソースを参照して、その仕組みを確認しました。Respond は CSS からメディア クエリを抽出し、ウィンドウの幅に応じて、メディア クエリが一致する場合、その CSS を含む新しいスタイル ブロックを作成します (これが、max/min-width などの単純なメディア クエリのみをサポートする理由です)。これはもちろん、メディアクエリをシミュレートしているため、JS の照会には役立たないことを意味します。

matchMediaポリフィルを含めることは、実際には厄介なことです。matchMediaブラウザ APIに相当するものを作成するだけです。したがって、ブラウザーが (IE8 のように) 非常に限定されたメディア クエリのセットしかサポートしない場合、その機能は拡張されません。私は最初に自分でこの間違いをしました！

これが役立つかどうかはわかりませんが、 enquire のregisterメソッドは 3 番目のパラメーターを受け入れることができます。これは、ブラウザーが incapable と見なされた場合shouldDegradeに機能を常に実行するように指示するシグナルです。したがって、 を渡すと、機能のないデスクトップ ブラウザーに対して常に match 関数が実行されます (ただし、機能するブラウザーの場合は引き続き条件付きです)。これにより、特にモバイル ファーストのアプローチで役立つ、古いブラウザーにデスクトップ エクスペリエンスを提供できます。true

他にご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-11-08T17:33:27.240 に答える
0

IE8でうまくいくと思われる解決策を見つけました

1.とても重要！match.media を使用している場合は、respond JS から削除します (使用しない場合、IE でサイレントに失敗します)。

2. 少なくともメディアクエリのテスト、ロード、shiv を使用して Modernizr をインクルードします: http://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load

3.In < head > (頭にrespondjsが必要なため)

<script src="../../common/vendor/modernizr/modernizr.custom.js"></script>
<script>
    Modernizr.load([
        // Test need for CSS media query polyfill
        {
            test: Modernizr.mq("only all"),
            nope: "../../common/vendor/respond/respond.min.js"
        }
    ]);
</script>

4. ポリフィルとスクリプトをロードする < /body > タグの前

<script>
    Modernizr.load([
        {
            test: window.matchMedia,
            nope: [
                "../../common/vendor/polyfills/media.match.js",
                "../../common/vendor/polyfills/matchMedia.addListener.js"
            ]
        },
        '../../common/vendor/enquire/enquire.min.js',
        '../../common/scripts/script.js'
    ]);
</script>

私はそれがあなたのために働くことを願っています!

于 2014-10-02T09:38:39.477 に答える