Запускать javascript/jquery только на экранном носителе, а не печатать

Как я могу запустить функцию jquery только на @media screen?

Фон:

У меня есть таблица стилей screen.css и таблица стилей print.css. У меня есть две функции javascript, одна из которых Я не хочу запускать на печатной версии.

Ответ 1

Любой script будет запускаться при загрузке страницы, поэтому использование if (Modernizr.mq('only screen')) {$('h1').text('media screen');} бессмысленно, поскольку оно запускает ваш script, пока вы находитесь на @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();
    }
});

Ответ 2

В последних браузерах вы можете использовать matchMedia:

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

Если вы хотите также поддерживать старые браузеры, вы можете использовать polyfill как matchMedia.js

Ответ 3

Я думаю, вы могли бы использовать Modernizr. Хотя, должен быть собственный способ сделать это в javascript.

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

Я никогда не пробовал, но это что-то вроде этого:

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

Остерегайтесь старых браузеров, не поддерживающих медиа-запросы.