Run javascript/jquery only on screen media, not print

Question

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

Background:

I have a screen.css stylesheet and a print.css styl

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

Answer 2

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.

Answer 3

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