10

でのみjquery関数を実行するにはどうすればよい@media screenですか?

バックグラウンド：

screen.cssスタイルシートとスタイルシートがありprint.cssます。私は 2 つの JavaScript 関数を持っていますが、そのうちの 1 つはページの必要な印刷版では実行したくありません。

4

3 に答える 3

9

ページの読み込み時にスクリプトが実行されるため、を使用してif (Modernizr.mq('only screen')) {$('h1').text('media screen');}いるときにスクリプトを実行するため、を使用しても意味がありません@media screen。

代わりに、メディアクエリが変更されるたびに検出し、それに応じてページを変更する必要があります。enquire.jsのようなものを使用して、これを簡単に行うことができます。

// This is just an example, be more creative!

enquire.register("screen", {
    match: function() { 
        $('#only-show-on-screen').show();
    },
    unmatch: function() {
        $('#only-show-on-screen').hide();
    }
});
于 2013-02-14T17:43:59.970 に答える
5

最新のブラウザでは、matchesMediaを使用できます。

if (window.matchMedia("screen").matches) {
    ....
}

古いブラウザもサポートしたい場合は、matchMedia.jsのようなポリフィルを使用できます

于 2012-08-24T15:28:38.697 に答える
0

Modernizr を使用できると思います。ただし、javascript でそれを行うためのネイティブな方法が必要です。

http://modernizr.com/docs/#mq

試したことはありませんが、以下のようなものです。

if (Modernizr.mq('only screen'))
{
..
}

メディア クエリをサポートしていない古いブラウザには注意してください。

于 2012-08-24T15:32:57.830 に答える