Run javascript/jquery only on screen media, not print

问题

How can I run a jquery function only on @media screen?

Background:

I have a screen.css stylesheet and a print.css stylesheet. I have two javascript functions, one of which I do not want to run on the printed version want of the page.

回答1:

Any script would be ran when the page loads, so using if (Modernizr.mq('only screen')) {$('h1').text('media screen');} is pointless as it runs your script while you're on @media screen.

Instead, you have to detect whenever the media query changes, and change the page accordingly. You could use something like enquire.js to do so easily:

// 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();
    }
});

回答2:

In latest browsers you can use matchesMedia:

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

If you want to support older browsers too you can use a polyfill like matchMedia.js

回答3:

I think you could use Modernizr. Although, there must be a native way to do it in javascript.

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

I have never tried it but it is something like this:

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

beware with old browsers not supporting media queries.

来源：https://stackoverflow.com/questions/12112255/run-javascript-jquery-only-on-screen-media-not-print